Slideshow

Here's what you will learn with this javascript tutorial.

Preview & Code

How to use It

Preview & Code

Did you really enjoy it? I know it looks like animation but it it's actually using javascript. This code is super easy to use.

<ul> <script type='text/javascript'> var speed = 3; var duration = 2; var transition = 'progid:DXImageTransform.Microsoft.Fade(Duration='+duration+')'; set=setTimeout; var images = new Array(); images[0] = 'FIRST IMAGE URL'; images[1] = 'SECOND IMAGE URL'; images[2] = 'THIRD IMAGE URL'; 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()'> </ul>

Using it

You think it's to slow, you want more images in it, well then this section takes care of that.
Alright, here's how to customize the slideshow:

Where it says var speed = 3; controls how long each image stays up before it changes. 5 seconds is a pretty good length of time, but if you want it to be shorter or longer, just change the number of seconds!
Where it says var duration = 2; controls how fast the switch of the images takes place. So, if you want the images to change quickly, leave it at 2. If you want them to change more slowly, up the number!
Where it says images[0] = 'FIRST IMAGE URL'; is where you put the URL to your image. Change where it says "FIRST IMAGE URL" to the URL of the image you want. Do the same for the second and third.
If you want more then three images in the slideshow, just add another images[3] = 'URL OF IMG'; to the code and make sure you change the number in the brackets to the next consecutive number, which in this case is 3.

There you go! You should now have an awesome slideshow on your site!