Creating an image slide show (Two parts)

The first step, needless to say, is to first fetch the images you want to include in the slideshow. For this tutorial, we'll be using these three images:

Imagine yourself as a car salesmen, and these three cars are the ones you are selling!

The term "preload" in JavaScript refers to the loading of images into cache prior to displaying them. Preloading images is "necessary" in a slide show, since the switching between images have to be instantaneous, without any delay:

We've created three instances of the image object and stored them inside a JavaScript Array, each referring to one of the images that make up the slide show. By doing so, the images are loaded into cache, standing by for us to display at anytime. Notice that the entire code is inserted in the <head> section of the page (Detailed discussion of preloading images can be found here).

Step 3: Add in the html codes necessary to display the first image of the slide show.

All we've done above is insert the first image of the slide show using HTML. Notice how we gave the image a "ID" attribute. By naming the image with an arbitrary ID value, it enables JavaScript to access and manipulate the image, which we will see next.

Step 4: With everything in place, all we need now is a script that accesses the above image and changes the src of the image periodically, creating a slide show. The below lists the complete script:

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

slideit()

</script>

The left hand side of the equal sign ("=") accesses the image container we've inserted onto the page, by using the JavaScript method document.getElementById() to access the image by, well, its ID attribute value. After that, we reference its "src" property, which is what lets us change the image's src property to another image URL or path. The right hand side dynamically assigns a new src (path) to the image from one of the image paths stored inside our JavaScript image array, thus changing the image. The three possible paths the image may now receive are:

slideimages[0].src //"firstcar.gif"
slideimages[1].src  //"secondcar.gif"
slideimages[2].src  //"thirdcar.gif"

in that order. Elements within a JavaScript Array are referenced based on their index position within the Array, starting at 0 for the first element, 1 for the second etc.

We've preloaded the images, inserted the first image of the slideshow, and created the function necessary to change the path associated with the image every few seconds. All we have to do now is put it all together into one page, and we've got ourselves a slideshow:

<html>
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"

</script>
</head>
<body>
<img src="firstcar.gif" id="slide" width="100" height="56" />

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

slideit()

</script>
</body>
</html>

How to create a basic slide show