java script slider

javascript_logo_unofficial-300x300
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 gambar
23.var step=1
24.function slideit(){
25.//jika browser tidak mendukung metode dokumen.image maka keluar.
26.if (!document.images)
27.return
28.document.images.slide.src=eval("image"+step+".src")
29.if (step<3)
30.step++
31.else
32.step=1
33.//memanggil function "slideit()" setiap 3 detik
34.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–