Pendahuluan
Tutorial ini sebenarnya sudah lama mau ditulis, tapi terlalu banyak hambatan sampai-sampai telat dirilis (seperti album saja pakai rilis… hehehe). Jadi inti dari tutorial singkat kali ini adalah untuk membahas trik rolling image dengan timer menggunakan javascript. Jadi pengunjung tidak perlu me-reload halaman untuk melihat banner selanjutnya.
Langkah-langkah
Nah, untuk contoh kali ini, kita akan mengubah gambar latar pada header yang memiliki id “header” , misalnya sebuah halaman seperti berikut:
<html>
<head>
<title>TestPage</title>
<style>
#header {
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id="header">hello world</div>
<!-- nanti javascriptnya disimpan di sini -->
</body>
</html>
Coba perhatikan snippet di atas, kita akan menambahkan script untuk rolling images pada bagian yang sudah diberi tanda. Untuk source code javascriptnya seperti berikut ini:
<script language="javascript"> var i = 0; // counter var t = 3000; // waktu 3 detik var p = new Array( 'http://www.google.com/intl/en/images/sitesearch/bsd.gif', 'http://www.google.com/intl/en/images/sitesearch/linux.gif'); function showImage() { if (i == p.length) { i = 0; } document.getElementById('header').style.backgroundImage = "url('" + p[i] + "')"; i++; setTimeout('showImage()', t); } showImage(); // javascriptnya akan dimulai dari sini </script>
Yang perlu Anda lakukan adalah mengganti URL gambar pada source di atas menjadi gambar yang Anda inginkan serta mengubah variabel t menjadi selang waktu yang Anda inginkan untuk pergantian tiap gambar. selang waktu ini nilainya dalam milliseconds, misalnya pada contoh di atas, 3000 artinya pergantian gambar dilakukan setiap 3 detik. Sebagai contoh nyata, Anda bisa mengunjungi halaman ini. Sekian tutorial singkat ini, semoga bermanfaat. Jika ada yang ingin ditanyakan, silakan ditanyakan di bagian comments. Terima kasih :)
makasih tutorial rollingnya