Dalam membuat layout web kadang diperlukan gambar slide show untuk memberi suasana hidup pada web tersebut. Biasanya digunakan untuk header atau banner web.
Sebenarnya untuk membuat animasi slide show bisa kita gunakan flash(.swf) atau gambar gif. Jika kita menggunakan flash tentu saja masih diperlukan plugin tambahan lagi untuk menjalankannya yaitu flash player. Hal ini tentu saja kurang fleksibel. Sedangkan jika kita menggunakan file gif, kita terkendala pada tampilan grafis dan besarnya file.
Berikut adalah contoh sederhana membuat slide show image menggunakan javascript. Dalam contoh ini kita gunakan 3 buah gambar yaitu images1.jpg, images2.jpg, dan images3.jpg. Gambar tersebut akan ditampilkan secara slide show dengan mengatur waktu tampilnya. Simpan file images tersebut jadi satu folder dengan file javascript nya.
01.<html>02.<head>03.<script language="javascript">04.<!--05.var image1=new Image()06.image1.src="images1.jpg"07.var image2=new Image()08.image2.src="images2.jpg"09.var image3=new Image()10.image3.src="images3.jpg"11.//-->12.</script>13.</head>14.<body>15.<center>16.<h2>SlideShow</h2>17.<h2>Contoh Slide Show Header</h2>18.<hr size=5 color="black">19.<img src="images.jpg" name="slide" width="800" height="200">20.<script>21.<!--22.//variable yang akan menaikan hitungan gambar23.var step=124.function slideit(){25.//jika browser tidak mendukung metode dokumen.image maka keluar.26.if (!document.images)27.return28.document.images.slide.src=eval("image"+step+".src")29.if (step<3)30.step++31.else32.step=133.//memanggil function "slideit()" setiap 3 detik34.setTimeout("slideit()",3000)35.}36.slideit()37.//-->38.</script>39. 40.</body>41.</html>Selanjutnya aplikasikan contoh tersebut pada design web anda.
NB : kita dapat mengembangkan dengan mebgambil gambar dari database, sehingga gambar bisa diganti secara dinamis.
Aplikasi Slide show (slider) yang lebih kompleks dapat dikembangkan dengan jquery.
— selamat mencoba —
–dfr–
Post a Comment