HTML
Basics Random Codes Marquees Text Around Image Overlapping Text Text Effects
CSS
Custom Navigation Subheading Backgrounds Transparent Scrollbars
Javascript
Add Favourites Image Slide Show Status Bar Back/Forward Last Modified Closed Window Password Protect
Stats
Tutorials: 16
Last Added: Password Protect
Layout Version: V1. Vanessa Hudgens
Webmiss: Sam
Date: 4.1.2008
Return Home: Here
Kiki-La Tutorials
JAVASCRIPT - Image Slideshow
The only part in the below code that you need to edit is the 'URL HERE' This is set up for 3 images, simply cody and past the images=[3] = 'URL HERE'; part. Change the number 3 accordingly. Speed of the slideshow is controlled with the var speed=2 tag, simply change the number.
<script type='text/javascript'> // set slideshow speed in seconds var speed = 2; // set transition duration in seconds (only for ie 5.5+) var duration = 1; // set transition effect (only for ie 5.5+) var transition = 'progid:DXImageTransform.Microsoft.Fade(Duration='+duration+')'; set=setTimeout; var images = new Array(); // url to your images images[0] = 'URL HERE'; images[1] = 'URL HERE'; images[2] = 'URL HERE'; images[3] = 'URL HERE'; // do not edit anything below this line var preload = new Image(); for (var i = 0; i < images.length; i++) { preload[i] = new Image(); preload[i].src = images[i]; } document.write('<img src='+preload[0].src+' name="slideShow">'); var j = 0; function run() { if (document.all) { document.images.slideShow.style.filter=transition; document.images.slideShow.filters[0].Apply(); } document.images.slideShow.src = preload[j++].src; if (document.all) { document.images.slideShow.filters[0].Play(); } if (j == images.length) { j = 0; } set('run()', speed * 1000); } </script> <body onload='run()'>
Back . Forward