Skip to content


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

KurangBiasaLumayanBagusLuar Biasa (20 votes, average: 4.35 out of 5)
Loading ... Loading ...
5,536 views

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>

Update pada tanggal 08 Maret 2009:
Kini slideshow dapat secara otomatis berpindah-pindah content. Terima kasih
atas masukan para pengunjung web chandrajatnika.com.

Update pada tanggal 06 Mei 2009:
Download juga tutorial agar data slideshow dapat diambil dari database sehingga slideshow menjadi dinamis DISINI.

Demo aplikasi dapat anda lihat di Link ini

Download aplikasi lengkap pada Link ini

Semoga bisa bermanfaat… ^_^

Posted in JQuery, JavaScript, Snippets. Tagged with , , , , .

40 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. newbie_bangetzz said

    wah keren ni mas chandra atikelnya…
    sangat membantu sekali, kebetulan lagi nyari image slide show…

  2. harry said

    keren ya!!!!

  3. Baronk said

    Tenx Berat Om Ariel Peterpan..he..he.. habis wajahnya mirip Ariel peterpan seh

  4. Baronk said

    Om mau naya nih gimana caeanya buat subdomain pakai PHP untuk setiap user yang mendaftar pada wbsite kita. Contohnya seperti di blogspot.com. Misalnya namasaya.blogspot.com

    Tenx ya!

  5. dee said

    mas klu untuk automaticnya gimana ya, tanpa harus mnegklik page itu

  6. Oke saya update deh scriptnya agar bisa diberi animasi dan berpindah-pindah slideshow otomatis. Terima kasih atas masukannya.

  7. thanks tip & sourcenya.. amat membantu.

  8. kalo di wordpress pakai hosting bisa nggak…kalo bisa di mana letaknya…di plugin or di mana

  9. makasih om

  10. apa kabar neh?
    keren deh tutorialnya

  11. heroik said

    Kalo dihubungkan dengan sql gimana caranya??

  12. tamtam said

    good tutorials

    klo buat berita terkait itu gimana ya?

  13. tin said

    tiap file itu dipisah, atau disatukan di dalam 1 html?
    terimakasih

  14. untuk kasus di artikel ini semua slide ada di 1 halaman html

  15. yanto said

    bagaimana cara mengambil data lewat database pak?…thx…mohon kasih conto,,thx

  16. admin said

    sudah saya buatkan sebelumnya mas. coba lihat lagi di akhir-akhir artikel ini.
    ato lebih cepatnya menuju link ini http://downloads.chandrajatnika.com/Slideshow_Dinamis.pdf

  17. tomi said

    artikelnya keren…
    ada YM?

  18. yanto said

    pak…..kenapa isi dari tabelnya tidak muncul yah pak…salah dimana yah…thx

  19. ropiee said

    ok pak…dah bisa…bagus sekali..thx

  20. yanto said

    pak…kalo divcontentnya dalam beberapa column gimana yah pak..thx

  21. ya gampang aja di dalem div kmu kasih aja table, klo kurang besar div-nya kmu ubah lebar div dari CSS

  22. yanto said

    ok pak…dah bisa…..seandainya lebih lanjut lagi pak….kalo judulnya di klik…trus ke buka semua berita….jsaya rubah fieldnya jadi berita_detail, berita_full……jadi kalau judulnya di klik lsg masuk ke berita fullnya…thx..mohon pencerahannya

  23. herman said

    Thanks banget atas tutorialnya

  24. Uus Khusni said

    Selamat siang.

    Perkenalkan nama saya uus. Saya seorang staff IT di salah satu lembaga pemerintah. Saya kebetulan mendownload aplikasi tersebut dan saya akan aplikasin di Web kantor saya bekerja. Web tersebut saya hosting di Indosat dengan spesifikasi server menggunakan IIS, PHP 4.4.8 ketika saya upload aplikasi tersebut tidak berjalan sebagaimana mestinya. Trus saya coba dikomputer saya dengan settingan yang sama dengan server indosat yaitu menggunakan IIS dan PHP 4.4.8 dan berjalan lancar. Saya mohon masukannya Pak.

    Terimakasih

  25. hariez said

    kok bisa ya…????
    heheheheee…
    1. trus klo mo mengentikan slide show otomatisnya gmn.
    2. disitukan tag href diisi dengan value = javascript:;, kalo g dipake g papakan, hehehee…
    3. kayaknya bagus bangeth dech kalo dijadiin slide image galery….
    yang link 1,2,3 dst tu diganti thumbnail foto yang udah diresize…
    pasti bagus..
    4. makasih tutornya..

  26. wai said

    keren mas hanks berat

  27. Mantap banget.
    makaci ya

  28. Cek..cek..cek…
    Ternyata anak BL..
    Sy jg anak BL angkatan 05 LOL….

  29. mas untuk topik slideshow berita headline dengan database tolong di angkat ke materi donk..soalnya saya lg butuh buat belajar. udah saya utak atik nga mau keluar field yg di database nya…

  30. mantabbssss,,,,mas,,,langsung ctrl+D

    tankyu

  31. terima kasih banget mas…

    kebetulan saya juga lagi butuh script ini…
    btw aku minta izin ya biar bisa dimuat di blog ku??
    aku nunggu izin dari mas dulu baru di posting…
    ^_^

  32. Silahkan dimuat, jangan lupa ikut sertakan sumber artikel, terima kasih. ^_^

  33. so pasti itu…
    makasih atas izinnya…
    kapan2 bisa mampir ke blog saya..hehehe

  34. tutorial yang mudah di mengerti dan di pahami .terimakasih

  35. dEsTa said

    Mas, klo mau di tambah play/pause/stop gimana yach?
    Tolong y mas..
    Terimakasih

  36. s@s said

    tengkiyu boss.. atas artikelnya..

  37. aziiiib……..
    mkasih bgt .

  38. kind said

    thanks for “T-10″

  39. Fajar ITS said

    Luar biasa, terima kasih Pak.
    Ilmu yang sangat bermanfaat sekali.

  40. ilmu Yang Bermanfaat banget..
    trimakasih…

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.