Image Slide Show

Using JavaScript we can create a slide show that will allow visitors to view the our images. This can be used if you have an album of photos that are related and you want to display them in a clean layout.

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

function slideShow(direction){

 if (direction == 'next' && count <=2){
 count++
 }

 if (direction == 'back' && count >=1){
 count --;
 }

  document.getElementById("show").innerHTML = (count+1)+" of 4 <br> <img src='images/"+images[count]+"'>"
}  
</script>

This is just the JavaScript part of our script. The first thing we do is define two variables, count and images. Count is equal to zero, where as images is an array that has four values in it. These values are the names of the images we want to use in our slide show. Then there is a function called slideShow, and it is asking a value be passed to it. Inside the function we see an if statement. This statement says if the value passed to slideShow is equal to next, and count is less than or equal to two, then increase count by one. Then there is a second if statement, it is checking to see if the value passed to the function is back, and the count is greater than or equal to one the decrease count by one. In the final step of the script, we are writing what image the user is on, and the image to the browser window.
Let's take a deep look at why both of the if statements are comparing count the way that they are. Since count will later be used to call for the image in the array, we want to make for sure we do not call for an image that does not exist. In our example code, if count was to equal anything over three, then we would not get an image. Since our maximum number of keys is three. Remember JavaScript starts counting array keys at zero, then we do not want to go over three. At the same time, we do not want count to go into a negative range of numbers, so we have to tell the script to have count stop at zero. Since our statements are increasing and decreasing the value of count, we have to tell them if count equals the value before the maximum and minimum number of keys, to not increase or decrease count. If you were to add additional keys to the array, then in the first if statement, you would also change the number to compare count to, but you would not change the second statement, unless you manually create a key that is negative.
Lets now look at the HTML side of the code.

<div id="show">
<script>
 slideShow()
</script></div>

<input type="button" value="<- Back" onclick="slideShow('back')"><input type="button" value="Next ->" onclick="slideShow('next')">

The HTML code is nothing that you should not have used or at least seen so far. We have a div tag with an id of show. Then we have two buttons, one labeled <- Back, and the other labeled Next ->. These buttons, are what cause the images to rotate. To do this, we use the onclick event to run the slideShow function. Since we want to move back or forward, we also pass a value to the function. By passing this value to the function, we are then increasing or decreasing the array number, but to the user it seems as if we are just changing the picture. Below is an example of the code.