A simple javascript image slide show using setTimeout and jQuery

Just now i created a small slideshow. The slideshow uses some static images stored in a javascript object (array) and runs till the last image in this array. For example, the array:

var images = ["img1.jpg", "img2.jpg", "img3"];

I would use each images in the array above to replace the src attribute of an image tag placed on my page. The image tag looks like:

<img src="defaulimg.jpg" id="bodyImage" />

I would want first image “img1.jpg” loaded normally and thereafter each remaining images loaded automatically one by one with a fadeIn effect. Actually, this was the requirement of the project (to load first normally and then others with a decent effect) so i only explain the same thing in some details below. Here is the function itself:

function RunSlideShow(obj, path)    {

var currIndex=0;
var cl;
var timer=3000;

$('#bodyImage').attr({"src": "images/"+path+"/"+obj[currIndex]});
currIndex++;

function runCont()    {

$('#bodyImage').hide().fadeIn(600).attr({"src": "images/"+path+"/"+obj[currIndex]});

if(currIndex>=(obj.length-1))    {
stopTimer();
return;
}

currIndex++;
cl = window.setTimeout(runCont, timer);

}

function stopTimer()    {
clearTimeout(cl);
}

window.setTimeout(runCont, timer);
}

In the function above, starting from the top, currIndex, cl and timer are default variables. currIndex is the current index of an image in the images array, cl is a declaration which will be assigned with the ID of setTimeout method so that it (ID) could be used to clear the timer. Variable timer is time in milliseconds, so 3000 means 3 seconds and so on. Next lines are:

$('#bodyImage').attr({"src": "images/"+path+"/"+obj[currIndex]}); currIndex++;

In the two lines above, as soon as the function RunSlideShow is called, it replaces the image source with the very first image in the array and increment the currIndex by one. Following i do declare two local functions which are used by main setTimeout call. The first of these functions is runCont (i actually mean by run continuously) which performs the main task of replacing/filling image source with each further image, with some nice effect. Let’s take a look at the first line of runCont function It is :

$('#bodyImage').hide().fadeIn(600).attr({"src": "images/"+path+"/"+obj[currIndex]});

Which means that just before changing the image source hide it (to nullify the effect of already changed source before fadeIn! – if i don’t do it, it would show the new image and do fadeIn) and then fadeIn (show) new image.

Next piece of code, that is:

if(currIndex>=(obj.length-1)) { stopTimer(); return; }

performs the check whether we need to stop the slide show or not. If we are on the last image in images array we just stop the slide show by terminating the recursive action and exit. And finally,

currIndex++; cl = window.setTimeout(runCont, timer);

First line in above code increments the current index and shifts to the next image in images array. Next line runs the runCont function recursively i.e. it calls itself and performs the same action until it is terminated.

That’s it explaining the function. You call it like RunSlideShow(images, “slideshow”) whenever you need. :)