SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Tutorials
Popular Tutorials
Drop down list
Timer function
JavaScript Tutorials
String
Array
Date & Time
Form Validation
Event Handling
Math Functions
JavaScript Forum
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

 
 

JavaScript Slideshow Rotator script

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);
}

Further readings
Image SlideShow Script using navigational buttons
Image Loading to cache while page load by Image object
Image Rotator Script for automatic Slideshow
 
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts
PHP
JavaScript