Pernahkah kalian membayangkan bagaimana cara membuat sebuah slideshow pada suatu halaman web? Tentu caranya sangat sulit, tapi tentu saja kita perlu mengetahui dasar-dasarnya terlebih dahulu. Nah di Tutorial Yodey kali ini, kita akan membahas sedikit ilmu mengenai slideshow dengan menggunakan javascript. Sebagai contoh awal kita pakai saja sebuah tag SELECT untuk membuat slideshow tersebut.

Contoh Demo :

gambar1 gambar2 gambar3 gambar4


Langkah awal yang harus perbuat adalah membuat file HTML dengan nama slideshow.html, kemudian taruh juga 4 buah gambar dengan format .jpg dan letakkan gambar-gambar tersebut di satu folder dengan file slideshow.html ini. Lalu buat sebuah tag SELECT dan tag DIV untuk menampilkan gambar dengan script HTML. Ini tidaklah sulit, tapi jika ada diantara kalian yang belum paham, kalian bisa melihat contoh dibawah ini:

<select id="pilihgambar" onchange="slideShow()">
 <option value="1">gambar1</option>
 <option value="2">gambar2</option>
 <option value="3">gambar3</option>
 <option value="4">gambar4</option>
</select>

<div id="slideshow"></div>

<script type="text/javascript">
function slideShow(){
 var nilai = document.getElementById("pilihgambar").value;
 if(nilai==1){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-black.png'>";
 }
 if(nilai==2){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-white.png'>";
 }
 if(nilai == 3){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-4.png'>";
 }
 if(nilai == 4){
 document.getElementById("slideshow").innerHTML = "<img src='http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-3.png'>";
 }
}
</script>

• Login ke Akun Bloger anda.
• Masuk kerancangan HTML
• Tambah Gatget pilih HTML/Java Script dan Simpan Slesai broo..

Slamat mencoba, "Salam Blogger Indonesia"
Semoga Bermanfaat...............