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
reference : http://www.cryer.co.uk/resources/javascript/
13 komentar:
mantap...
wah, ini penting banget, perlu di bookmark ini
file css nya untuk gambarbackground kayanya gak ada?
your welcome..
Untuk contoh ini tidak memerlukan file CSS..
akhirnya ketemu juga ...makasih banget gan...mo aku pasang di websiteku..
io
Nice post..
Lihat hasilnya di fiverbook.com it's work gan...
Thanks..
aku tidak berhasil :(
thank you thank you..
mantap
good morning ..
my name is muhammad Ramdhani I want to ask a question about image slider with javascript.
I want to create an image slider dynamic javscript that is using a csv file that contains the URL. so whenever there is a new image I update using a URL in the CSV file. how well do .... thank you.
makasih masbro... script berjalan dengan baik
(ilo-full-src="") kok bsa unidentifier knapa ya?? mohon bantuannya kawan2....
Posting Komentar