Auto Rotating Slide Show

In the tutorial Image Slide Show, we created a slide show that allowed the user to move through an array of images. In this, tutorial we are going to make a slide show that rotates on it's own.

<script language="JavaScript" type="text/javascript">
var images = new Array('morning.jpg','afternoon.jpg','night.jpg','lightbulb_on.jpg')
var count = -1

function slideShow(){  

 if (count <=2){  
  count ++;
 }

  document.getElementById("show").innerHTML = ""
  setTimeout("slideShow()", 3000)  
}  
</script>
<div id="show">
 <script>slideShow()</script>
</div>

First thing we do in the script is define an array with all the images that we want to use in our slide show. We also set count to equal negitive one. This is because when the function that we are going to use to rotate the images, will add one to count making it equal zero, and will display our first image. If count was to start at zero, then the first image in our array will not be shown. Next we have a function named slideShow. Inside this function we have a simple if statement that is increasing count by one, while count is less than or equal to two. The following part the code writes an image tag to the browser. The final part of the JavaScript part of the code creates a timer, that will execute the slideShow function every three seconds. Then there is the HTML code, that is a div tag that the JavaScript is writing to.

If we were wanting the slide show to loop, then we can change the if statement to an if else statement. The else part of the statement would set count back to zero.

if (count <=2)
 count++;
else
 count = 0;

Below is an example of the code with the if else statement.