JavaScript Image Rotator script with settimeout timer function

We can modify our JavaScript slide show script to show images automatically one after the other at a particular transition interval. Rotation is automatically triggered and user need to click the forward or backward buttons to navigate through the slideshow.

Please read JavaScript image slideshow script before adding this feature.

We will add one setTime function inside our displaynext function. This function will trigger the same displaynext function at an interval of 3 seconds. We can change this value and note that this function setTimeout accepts time duration values in milliseconds. You can read more on this at our JavaScript timer tutorials.

setTimeout("displaynext(1)", 3000);

Note that all other codes are same as Javascript Slideshow tutorial and you can remove the codes for navigational buttons if required after adding automatic transition to our slideshow. Here is the code of displaynext function with the setTimeout function added.

function displaynext(shift){
present_slide=present_slide + shift;

if(images.length > present_slide && present_slide >= 0){
//document.images[''im''].src = images[present_slide];
document.images[''im''].src = images[present_slide];

var next_slide=present_slide + 1;
download(next_slide); // Download the next image 
setTimeout("displaynext(1)", 3000); 
}

Image Object

Subscribe to our YouTube Channel here

JavaScript Slideshow Rotator script