Membuat Slideshow Headline Berita Sederhana Dengan JQuery (+Efek Animasi)

Jika berbicara tentang sarana interaktif pada web di era saat ini. Efek slideshow tentunya paling sering digunakan oleh website-website yang mengandung content berupa berita. Slideshow biasa diisi dengan rangkuman-rangkuman berita terkini (Headline) agar pengunjung dapat memantau perkembangan berita terkini dengan sajian efek slideshow yang menarik dan tidak akan cepat membuat pengunjung bosan.

Contoh slideshow yang akan kita bangun pada artikel kali ini adalah seperti gambar berikut:

Kunci dari pembuatan fasilitas ini pada halaman web anda adalah CSS + JavaScript. Untuk membuatnya pertama kali buat halaman HTML seperti ini:

<div id="divTrigger">
 <a href="javascript:;" onClick="openContent(this,'div1')" id="firstSlide">1</a>
 <a href="javascript:;" onClick="openContent(this,'div2')">2</a>
 <a href="javascript:;" onClick="openContent(this,'div3')">3</a>
 <a href="javascript:;" onClick="openContent(this,'div4')">4</a>
</div>
 
<div id="divContent">
 <div id="div1">
    <span class="title">Pemandangan Pantai</span>
  <img src="images/img1.jpg" align="left" /> Pemandangan pantai memang menakjubkan, dengan berdiam diri sejenak dan
  melihat pemandangan pantai niscaya kita akan mendapatkan kedamaian jiwa.
 </div>
 <div id="div2">
    <span class="title">Dua Pinguin</span>
  <img src="images/img2.jpg" align="left" /> Pinguin adalah spesies makhluk hidup yang langka dan hanya terdapat pada
  benua tertentu di bumi ini. Oleh karena itu kita penduduk dunia harus melestarikannya.
 </div>
 <div id="div3">
  <span class="title">Pepohonan Sejuk</span>
  <img src="images/img3.jpg" align="left" /> Ini adalah gambar wallpaper pilihan saya ketika sedang bekerja, dengan 
  melihat gambar ini hati terasa menjadi lebih tenang.
 </div>
 <div id="div4">
  <span class="title">Hujan Sakura</span>
  <img src="images/img4.jpg" align="left" /> Menikmati bunga sakura bagi warga jepang adalah tradisi musiman yang 
  menyenangkan pada saat memasuki musim dingin.
 </div>
</div>

Lalu persiapkan CSS seperti ini:

 #divTrigger a:link,#divTrigger a:visited{
 text-decoration: none; /* hilangkan garis bawah pada link */
 margin:4px 0px; /* memberi jarak antar link */
 padding: 1px 4px; /* menjadikan link seperti kotak */
 border: 1px solid #CCC;
 background-color: #FFF;
 color: #000;
 }
 /* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */
 #divTrigger a:hover,#divTrigger a:active,.selected{ 
 background-color: #00A;
 color: #FFF;
 }
 #divContent{
 margin-top:4px;
 border:1px solid #CCC;
 width: 300px;
 height: 220px;
 padding: 4px;
 }
 #divContent div{ 
 /* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */
 display:none
 } 
 .title{
 font-size: 16px;
 font-weight: bold;
 color: #006;
 text-decoration: underline;
 margin-bottom: 2px;
 display:block
 }

Dengan menggunakan framework JavaScript JQuery kita akan lebih mudah berkreasi dengan efek slideshow. Contoh script-nya seperti ini:

<script language="javascript" src="jquery.js"></script>
<script language="javascript">
 /* parameter untuk menjalankan fungsi openContent ini adalah   
  1. Element trigger (link) yang akan membuka content apabila di click
  2. Id dari content yang akan ditampilkan
  */
 /* Update 08 Maret 2009
  -> Slideshow diberikan animasi otomatis berpindah-pindah content   
 */
 // siapkan variable timer yang akan menyimpan fungsi animasi 
 var timer = null; 
 function openContent(trigger,divID){ 
 // semua link pada div dengan id='divTrigger' akan di setarakan style-nya menjadi style normal 
 $('#divTrigger a').each( 
  function(){
   $(this).css({'background-color':'#FFF','color':'#000'});     
  }
 );
 // semua div di dalam element dengan id='divContent' disembunyikan
 $('#divContent div').hide();
 
 // div yang akan ditampilkan diberi efek fadeIn (built-in dari JQuery) ketika ditampilkan
 $('#'+divID).fadeIn('slow');
 
 // link menjadi trigger diberi style berbeda dengan link lainnya agar dapat diketahui content nomor berapa yang sedang aktif
 $(trigger).css({'background-color':'#00A','color':'#FFF'});   
 
 // Update 08 Maret 2009
 // timer di set 
 if(timer != null) clearTimeout(timer);
 timer = setTimeout( 
   function(){  
  /* Cek terlebih dahulu apakah link yang sedang di-click saat ini ada link lagi setelah itu
     apabila tidak ada link lagi setelah element yang sedang di-click maka pilih element link pertama
     dengan selector ':first' dari jquery. Setelah sudah ditentukan link, maka lakukan event click
     pada link tersebut. Setiap link yang di click akan menjalankan fungsi ini sehingga terjadi animasi
     perpindahan content slideshow.
  */   
  var nextAnchor = ($(trigger).next('a').text() == '') ? $('#divTrigger a:first') : $(trigger).next('a');
  nextAnchor.click();
   }, 3000 // 3 detik waktu perpindahan content
 );
 }  
 $(document).ready(
 function(){
  // untuk permulaan, tampilkan content nomor pertama '#firstSlide' adalah id dari trigger yang akan membuka content nomor pertama
  openContent($('#firstSlide'),'div1');   
 }
 )
</script>