How to Rotate Photos in Slideshows With JavaScript
- 1). Insert the following JavaScript code between the "head" tags of your HTML document:
<script type="text/javascript">
var photosets = {
slideshow1:[0,["dog.jpg","cat.jpg","horse.jpg","snake.jpg"]],
slideshow2:[0,["apple.jpg","banana.jpg","grape.jpg","melon.jpg","berry.jpg"]]
};
function rotatePhotos(id){
document.getElementById(id).src = photosets[id][1][photosets[id][0]];
photosets[id][0] += 1;
photosets[id][0] %= photosets[id][1].length;
}
</script>
Edit the "photosets" variable declaration to setup your slideshows. Give each slideshow a unique name (e.g., "slideshow1," "slideshow2," etc.) followed by a colon. List the filenames of the photos in the slideshow within the inner set of square brackets, enclosed in quotation marks and separated by commas. Each slideshow can be as long as you want. Separate slideshows with commas as shown. - 2). Add the following code to the body of your HTML document to place the slideshow on the page:
<img src="" />
<input type="button" value="Next Photo" onClick="rotatePhotos('slideshow1');" />
Repeat this code for each slideshow you want to put on the page, changing the slideshow names in the "img" and "input" tags to specify the slideshow you want. - 3). Save the page and load it in a Web browser. Click the button to advance the slideshow. The slideshows are blank at first; add calls of the "rotatePhotos" function in the "onLoad" attribute of the "body" tag to initialize them when the page loads. For example:
<body onLoad="rotatePhotos('slideshow1');rotatePhotos('slideshow2');">
Source...