web 2.0

Kamis, 11 Februari 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 komentar:

Anonim mengatakan...

mantap...

kickymaulana mengatakan...

wah, ini penting banget, perlu di bookmark ini

Anonim mengatakan...

file css nya untuk gambarbackground kayanya gak ada?

gun mengatakan...

your welcome..

gun mengatakan...

Untuk contoh ini tidak memerlukan file CSS..

totoktogel mengatakan...

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

Anonim mengatakan...

io

Fiverbook mengatakan...

Nice post..

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

Thanks..

Mas Lilin mengatakan...

aku tidak berhasil :(

Anonim mengatakan...

thank you thank you..

mantap

mine-phone mengatakan...

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 mengatakan...

makasih masbro... script berjalan dengan baik

Unknown mengatakan...

(ilo-full-src="") kok bsa unidentifier knapa ya?? mohon bantuannya kawan2....

Posting Komentar

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.