Social Icons

Pages

08 October 2012

Membuat Gambar/Image Slideshow Dengan JavaScript

Bagaimana membuat gambar/image slideshow dengan JavaScript ?.
Disini saya memberikan contoh script tanpa harus bermain dengan Flash, Slideshow beberapa image akan terlihat lebih halus perpindahan image 1 ke image yang lainnya.
sumber: http://www.putrariau.com/

Copy kan 3 image dengan ukuran yg sama ke dalam folder dimana kita menempatkan file html yang akan kita buat.

example :
- gbr01.jpg
- gbr02.jpg
- gbr03.jpg

Sisipkan script berikut diantara <head> </head> :

<script language="JavaScript" type="text/javascript" src="fade.js"></script>

Sebelumnya, Anda bisa download script fade.js dan copykan dalam folder dimana file html diletakkan.

Sisipkan script berikut diantara <body> </body> :

<div style="background-image: url(gbr01.jpg); background-repeat: no-repeat;"  
id="GambarBackground"> 
<img style="opacity: 0;" ilo-full-src="gbr01.jpg" alt="slide show"  
src="gbr01.jpg" id="GambarDasar" width="250" height="166"> 
</div>

Setelah itu sisipkan script berikut untuk pemanggilan slideshow :

<script type="text/javascript"> 
RunSlideShow("GambarDasar","GambarBackground","gbr01.jpg;gbr02.jpg;gbr03.jpg",3); 
</script>

Variabel nilai 3 pada pemanggilan RunSlideShow merupakan waktu delay tampil per image dalam second/detik.

berikut hasil tampilan Slide show : fade.htm


sumber : http://www.putrariau.com/2010/02/image-slideshow-dengan-javascript.html
Label: