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. 
Possibly Related posts:
- Invoking Lightbox2 slide show on page load
Invoke Lightbox2 on page load? Good question! If you have got frustrated searching for a solution to it, relax, it’s here! Just place the following... - jQuery way to limit input characters using javascript substring function
It’s an example of useful jQuery way to limit user entering a maximum set number of character in your input fields. Example makes use of... - Re-sizing image by width using php
A simple yet very useful function to re-size image by maximum width while keeping width and height in proportion. You just need to pass the... - How to prevent parent’s onclick event from firing when a child tag is clicked with jquery?
Generally, Javascript events bubble (listen) to the highest point in the DOM to which a click event had been attached. So even if you don’t... - jQuery pop up message box sliding from left to right and positioning horizontally at the center
Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears...
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
This is great, but I have problem with flash banners. Can’t read them. Any idea?
Many thanks…