web 2.0

Thursday, February 11, 2010

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

reference : http://www.cryer.co.uk/resources/javascript/

13 comments:

yazid said...

thanx

Anonymous said...

mantap...

kickymaulana said...

wah, ini penting banget, perlu di bookmark ini

Anonymous said...

file css nya untuk gambarbackground kayanya gak ada?

gun said...

your welcome..

gun said...

Untuk contoh ini tidak memerlukan file CSS..

totoktogel said...

akhirnya ketemu juga ...makasih banget gan...mo aku pasang di websiteku..

Anonymous said...

io

Fiverbook said...

Nice post..

Lihat hasilnya di fiverbook.com it's work gan...

Thanks..

Candle in the dark said...

aku tidak berhasil :(

Anonymous said...

thank you thank you..

mantap

mine-phone said...

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.

Rhivay said...

makasih masbro... script berjalan dengan baik

Post a Comment

Maria Ozawa disebut Miyabi bermain sex dengan free software dan tools hacking, hacker dan software cracker untuk para pecinta playboy dan Roy Suryo bersama Ruby Alamsyah demo bank century, gila bola dan juga free games desktop ada di Linux Ubuntu dan Mikrotik yang semuanya di ABG Bugil artis Bugil dan Indonesia Sex yang tidak mendidik pada Departemen Pendidikan beri free domain gratis dan hosting free hosting gratis soal toefl dan lowongan CPNS 2010 dari lowongan kerja 2010 dan rumah sakit paling bagus free lagu MP3 gratis divx film dvd movie 2010 download.