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

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Your Rating


Google+

More on JavaScript Image Object
Image SlideShow Script using navigational buttons
Image Loading to cache while page load by Image object
Reloading the image without refreshing the page
Image Rotator Script for automatic Slideshow
Image Move across by button click
Image Move continuously across screen
Image offSetLeft and offSetTop to get position of the image from left and top
Image Position : Positioning an image by assigning value to style.top and style.left
Image width: Managing width of the image
Image height: managing height of the image
Image align: Image align left or right
Image border: adding and removing border from Image
Image alt: updating or reading alt message of image

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer