Slide Show Gambar Dengan Javascript

Gede Lumbung19

Slide Show pada sebuah situs dapat mempercantik tampilan situs tersebut. Dengan Slide Show tersebut, tampilan situs terlihat lebih interaktif dan gak kaku. Kita dapat membuat Slide Show dengan Flash maupun Javascript. Keduanya pasti memiliki kekurangan dan kelebihan masing-masing. Kali ini, saya akan menuliskan sedikit tutorial membuat slide show dengan Javascript.

1. Siapkan gambar-gambar yang akan digunakan, disini saya menggunakan 4 buah gambar. Gambar-gambarnya dapat di download disini. Setelah itu, masukkan gambar-gambar tersebut ke dalam folder dengan nama images.

2. Download file-file pendukungnya (javascript dan css)

slideshow.js
slide-2.js
utilities.js

style.css

3. Buka text editor kesayangan anda, dan ketikkan beberapa baris html ini :

<html>
<title>Slide Show</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”utilities.js”></script>
<script type=”text/javascript” src=”slideshow.js”></script>
<body>
<div id=”bg-gambar”>
<img src=”images/iklan-header.jpg” width=”800″ height=”150″ alt=”large image” name=”SLIDESIMG” id=”SLIDESIMG” style=”opacity: 100;”/><script type=”text/javascript” src=”slide-2.js”></script>
</div>
</body>
</html>

4. Nah, sekarang kita akan sedikit bermain-main dengan Javascript. Buka file slide-2.js, di file ini kita akan melakukan konfigurasi slide show dari gambar-gambar di atas. Berikut sedikit potongan baris dari script file slide-2.js

SLIDES = new slideshow(“SLIDES”);
SLIDES.timeout = 5000; //mengatur waktu slide show
SLIDES.prefetch = 1;
//memanggil file gambar-1
s = new slide();
s.src = “images/iklan-header.jpg”;
SLIDES.add_slide(s);

//memanggil file gambar-2
s = new slide();
s.src = “images/iklan-header-1.jpg”;
SLIDES.add_slide(s);

//memanggil file gambar-3
s = new slide();
s.src = “images/iklan-header-2.jpg”;
SLIDES.add_slide(s);

//memanggil file gambar-4
s = new slide();
s.src = “images/iklan-header-3.jpg”;
SLIDES.add_slide(s);

5. Sedikit penjelasan dari script diatas :

SLIDES.timeout = 5000;

Potongan script diatas, berfungsi untuk mengatur waktu pergantian dari slide show. Diatur dalam satuan milidetik (1000 milidetik = 1 detik). Jadi, script diatas akan mengganti gambar setiap 5 detik sekali.

s = new slide();
s.src = “images/iklan-header.jpg”;
SLIDES.add_slide(s);

Script diatas, berfungsi untuk memanggil file gambar. Urutan pemanggilannya, yaitu dipanggil pertama mulai dari atas dan seterusnya ke bawah.  Jika ingin menambahkan gambar, kita hanya perlu mengcopy 3 baris diatas, dan menaruhnya di bawah urutan script sebelumnya.

6. Selamat mencoba script Slide Show diatas. Bagi yang ingin mendownload filenya, silahkan DOWNLOAD DISINI.


Uppppzzz.....!!! Tidak Ada Tulisan Yang Terkait.

19 comments

  2. aldy Reply

    Bli, jujur saya agak menghindar menggunakan java script, terkecuali yang sudah menjadi defaul wordpress :dead:

  17. sutris Reply

    makasih atas infonya…. manpirdonk ke blog ku dan kasih saran agar lebih baik..
    salam kenal terimakasih