Image Rotation Script

A sequential image rotation script. The images will refresh every set amount of seconds.

Author: SimplytheBest.net Price: Free GPLv2 Type: Javascript

EXAMPLE

The images are set to refresh every five seconds. You can place your images in a directory, naming them image0.gif, image1.gif, etc. The script will sequentially rotate through the images starting with image0. You can use .jpg or .png images if preferred by changing the .gif in gImages[i] = "images/image" + i + ".gif into .jpg or .png.

STEP 1

Insert the following into the <HEAD> section or in between the </HEAD> and <BODY> tags of the page.

Click in textarea to select code then copy and paste Ctrl-CCtrl-V

STEP 2

Insert the following HTML code in the <BODY> section where you want the image rotation to appear in the page. The HREF link is optional.

STEP 3

Define the number of images and set the timer for the rotation in this section of the script:

gSlideshowInterval = 5; // how often the images are refreshed (time given in seconds)
gNumberOfImages = 5; // the total number of images used

Define the directory where the images are located, the generic image name and extension in this section of the script:

gImages = new Array(gNumberOfImages);
for (i=0; i<gNumberOfImages;i++){
gImages[i] = "images/image" + i + ".gif"; } // change to .png or .jpg if applicable

Make sure that all the images are named sequentially (f.e. image0.gif, image1.gif, etc.), else the array will get corrupted, and start numbering with 0, not with 1. The name="slide" expression has to be inside the IMG tag to invoke the script.