"Om Swastyastu"
Kita bisa menggunakan fungsi setTimeout() dalam javascript. Selain itu ada beberapa kondisi dalam slideshow kali ini. Contohnya, slideshow harus dapat berjalan misal tiap 5 detik akan berganti gambar. Ketika slide tiba digambar terakhir, maka setelah itu akan kembali ke gambar pertama.
Pertama, Untuk memuat suatu image, pada Javascript terdapat objek Image. Untuk membuat
objek tersebut pendeklarasiannya adalah sebagai berikut :
img1 = new Image () img1.src = "pic1.gif"arti dari script di atas adalah membuat objek image dengan isinya adalah image pic1.gif.
Selanjutnya buat file .html menggunakan web editor kalian lalu copy code berikut, kemudian simpan dengan nama file sesuai ke inginan kalian,
img1 = new Image ()
<html>
<head>
<script language="javascript">
<!--
var image1=new Image()
image1.src="1.gif"
var image2=new Image()
image2.src="2.gif"
var image3=new Image()
image3.src="3.gif"
//-->
</script>
</head>
<body>
<center>
<h2>IT Programmer SlideShow</H2><hr size=5
color="black">
<img src="1.gif" name="slide" width="100" height="100">
<script>
<!--
//variable yang akan menaikan hitungan gambar
var step=1
function slideit(){
//jika browser tidak mendukung metode dokumen.image maka keluar.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//memanggil function "slideit()" setiap 5 detik
setTimeout("slideit()",5000)
}
slideit()
//-->
</script>
<hr size=5 color="black">
</body>
</html>
INGAT sesuaikan nama file image kalian dan letakan pada folder yang sama dengan file .html.Contoh Slideshow bisa kalian lihat di www.creanivate.com. namun yang ini menggunakan JQuery.
Sekian cara membuat Slideshow dengan javascript dari IT Programmer. Semoga bermanfaat. :)
"Om Santhi, Santhi, Santhi, Om"
cara pakai jquery gimana??
untuk slideshow dengan JQuery anda bisa lihat disini.. slideshow jquery
bisa ditambah caption gambar ngga?