Apa kabar teman-teman semuanya, masih pada semangat belajar? Pada tutorial sebelumnya kita telah banyak belajar efek-efek dan event serta animasi yang ada pada jquery, nah pada kesempatan kali ini kita akan belajar mengimplementasikan hal yang kita pernah pelajar sebelumnya yaitu event-event yang sudah kita pelajari pada tutorial sebelumnya dan pada sudi kasus kali ini kita akan mencoba membuat selideshow image sederhana dengan jquery.
Pada studi kasus kali ini, yang perlu teman-teman siapkan untuk tutorial kali ini adalah 3 buah gambar dan core atau library jquery yang dapat kita ambil pada website resmi jquery, disini saya sudah menyiapkan 3 buah gambar lalu file core atau library dari jquerynya.
Oke kita langsung saja praktek, teman-teman bias buat sebuah file html dan teman-teman dapat ketikan script berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>slider</title> <script src="jquery.js" type="text/javascript" ></script> <style> body{ background-size:100%} </style> </head> <body> </body> </html> |
Script di atas hanyalah struktur htmlnya saja karena pada kasus kali ini kita akan membuat slideshow image pada bagian body, script diatas saya hanya membuat pemanggilan core dari library jquerynya dan sedikit pengaturan css yaitu background-size yang berfungsi untuk mengatur ukuran dari background yang akan kita gunakan pada bagian body,
sekarang kita akan mengetikan script javascriptnya, Nah sekarang coba teman-teman coba tambahkan script javascript berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> $(document).ready(function(){ var x = ["Desert.jpg", "Chrysanthemum.jpg", "Hydrangeas.jpg" ]; $('body').css("background-image", "url('" +x[0]+ "')"); var count = 0; var time = setInterval(function(){ $('body').fadeIn("slow", function(){ $(this).css("background-image", "url('" +x[count++]+ "')"); }); if(count >= x.length) count = 0; }, 1000) }) </script> |
Disini saya tidak akan menjelaskan cara kerja javascript diatas karena saya beranggapan teman-teman sudah dapat membaca script javascript diatas,
Dan jika teman-teman save dan jalankan pada browser hasilnya adalah gambar akan bergantian muncul pada bagian body, gimana teman-teman mudah bukan? Saya rasa untuk tutorial kali ini saya cukupkan sampai sini dulu, sampai bertemu lagi pada tutorial berikutnya, semoga tutorial yang singkat ini bermanfaat untuk teman-teman semuanya.
Selamat mencoba
Terimakasih.