JavaScript Slide Show Logic

By Mash B

This logic illustrates the creation of an automatic slide show in which the image transitions happen every three seconds. The result is a slide show that starts on an initial image and then switches every three seconds.

<head>
<script language=”JavaScript”>

//Create a new element of the array for each slide show image and assign the path and filename of the image to the //src attribute of the object

var imageList = new Array;
imageList[0] = new Image;
imageList[0].src = “image1.jpg”;
imageList[1] = new Image;
imageList[1].src = “image2.jpg”;
imageList[2] = new Image;
imageList[2].src = “image3.jpg”;
imageList[3] = new Image;
imageList[3].src = “image4.jpg”;

function slideShow(imageNumber)
{
   document.slideShow.src = imageList[imageNumber].src;
   imageNumber += 1;

   if (imageNumber < imageList.length)
   {
     window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
   }
   else
   {
     // reset
     imageNumber =0;
     window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
    }

}
</script>
</head>
<body onLoad=”slideShow(0)”>
      <img src=”image1.jpg” width=100 name=”slideShow”>
</body>

JavaScript Slide Show Logic (1029 Views)