|
Ever wanted to loop through a set of images creating a slide show? Well it is really easy using JavaScript.
The first thing you are going to need to do is create your HTML page. It should look something like:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Image List
<script language="JavaScript" type="text/javascript">
//Javascript here
</script>
</head>
<body>
<!-- image tage here -->
</body>
</html>
Right now that we have the page we can start digging into the code. The first thing we are going to need to do is define and array containing the path to the images we want to rotate. That will look something like:
var images = new Array();
images[0] = 'images/image0';
images[1] = 'images/image1';
images[2] = 'images/image2';
images[3] = 'images/image3';
images[4] = 'images/image4';
//these images doen't have to be named sequential or reside
//in the same path, as long as the path is correct
Now that we have our array we can write the function we are going to use to rotate through the images.
//First we define the counter (starting at zero, because
//arrays start number from zero)
var counter = 0;
// Then we set the sleep time between images
var showImageFor = 3; //seconds
Okay now we create the function that will change the images.
function showImage(){
//check if the counter var has exceeded the length of
// of the images array
if(counter == images.length){
counter = 0;
}
//set the source of the of the image tag
imgObj = document.images.imageCotainer
imgObj.src = images[counter] + ".jpg";
//increment the counter so the
//next image will be displayed
counter++;
}
Final we create the function that will set the time between images
function runImages(){
//convert the seconds to milliseconds
milliseconds = showImageFor * 1000;
call the Javascript internal function setInterval()
setInterval("showImage()", milliseconds);
}
Just a quick break down of the setInterval function
setInterval([function to execute],[milliseconds to sleep]);
Now the final thing to do is add the call to runImages() when the page loads. This will be done in the onload trigger. Then we add the img tag that will display the images.
<body onload="runImages()">
< img src="images/image0.jpg"
name="imageCotainer" id="imageContainer" >
</body>
There you go! everything is in place. The complete page is listed below
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Image List</title>
<script language="JavaScript"
type="text/javascript">
var images = new Array();
images[0] = 'images/image0';
images[1] = 'images/image1';
images[2] = 'images/image2';
images[3] = 'images/image3';
images[4] = 'images/image4';
var counter = 0;
var showImageFor = 3; //seconds
/**
*
* @access public
* @return void
**/
function showImage(){
if(counter == images.length){
counter = 0;
}
imgObj = document.images.imageCotainer
imgObj.src = images[counter] + ".jpg";
counter++;
}
/**
*
* @access public
* @return void
**/
function runImages(){
milliseconds = showImageFor * 1000;
setInterval("showImage()", milliseconds);
}
</script>
</head>
<body onload="runImages()">
<img src="images/image0.jpg"
name="imageCotainer" id="imageContainer" >
</body>
</html>
If you have this concept under control you might want to take a look at PHP, Javascript Slide Show. Happy coding!
|
