Sequential Image Changer

This script generates a slideshow using a list of images you provide. The way it does this is by creating an array of the image names, then replacing the existing image with the next one in the array. As written, the script performs this every 5 seconds, but you can set it for any length of time (more on how to do this later).

To use this script, you need to insert the following into the header portion of your html document (preferably right before the </HEAD> tag):

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var secs = 5;

img1 = new Image();
img1.src = "1.jpg";
img2 = new Image();
img2.src = "2.jpg";
img3 = new Image();
img3.src = "3.jpg";
img4 = new Image();
img4.src = "4.jpg";
img5 = new Image();
img5.src = "5.jpg";
img6 = new Image();
img6.src = "6.jpg";


var pics = new Array(6);
pics[0] = img1.src;
pics[1] = img2.src;
pics[2] = img3.src;
pics[3] = img4.src;
pics[4] = img5.src;
pics[5] = img6.src;

var thisPic = 0;

var placeCt = 7;

function nextPic(){

	if (document.images){

	thisPic++

	if (thisPic == placeCt){thisPic = 0}

	document.ranpic.src = pics[thisPic];

	setTimeout("nextPic()",secs * 1000)
	}	
}
//-->
</SCRIPT>

Step 2 is to modify the <BODY> tag to read <BODY onload="nextPic()">

Step 3 is to add the <IMG> tag to your document in the place you want it to appear. The most important thing to include in the tag is the height, width, and the name="ranpic" attribute. The tag for the example reads:

<img src="1.jpg" height="150" width="150" border="0" name="ranpic" align="left" hspace="20">

You won't need to make any changes to the body of the document after this. You will,however, need to change the parts of the script marked in red to customize your page. The first thing to do is set the number of seconds between picture changes. This is set in the variable declaration var secs=5;. This sets the time between image changes to 5 seconds. Set it to the number of seconds desired between image changes.

The next variables to set are the names of the images you want to use. In the example, the names are 1.jpg, 2.jpg, etc. Set these equal to the names of the image files you want to use. You will need to make sure that the image files are all the same size and are the same size as the height and width attributes in the <IMG> tag. You can have as many images as you want, just add additional images by inserting a new
instance of the new Image() code:

img7 = new Image();
img7.src="7.jpg";

AND adding a new instance to the pics[] array:

pics[6] = img7.src;

Next, you will need to modify the new Array() tag to reflect the additions:

var pics = new Array(7);

Last but not least, you will need to update the placeCt variable statement to reflect the new number of images (remember that JavaScript starts counting at 0; in this case, the variable placeCt should be one more than the number of items in the array):

var placeCt = 8;

That's all there is to it! Some cautions, however:

The images are preloaded into memory so that they appear immediately when switched; this may result in increased page loading time, so make the images as small as possible (both in dimensions and file size). Use an image editing program such as Fireworks or LView Pro that has the capability of optimizing images for the web.
Some browsers have the strange (and undocumented, as far as I know) habit of gobbling up memory every time you use setTimeout() or setInterval(). The shorter the var secs interval, the faster this will happen, so don't set it too low. If you think people might leave your page open for more than a few minutes, you may want to add a META refresh to your page.