.
| Code: |
|
<html> <head> <title>TITLE</title> <script type="text/javascript"> // // First we're going to make an array that will hold all the file paths to each picture so that later we can call them into our function. // Obviously you will replace these values with actual paths to your images you want in your slideshow. // var pic = new Array("images/pic0.jpg","images/pic1.jpg","images/pic2.jpg"); // // Now we're going to create a variable that will determine which picture is displayed // var x = 0; // // Now we're going to make the function that will switch out the pictures. The function will replace the 'src' attribute of the <img> tag, then after a predefined amount of time, it will change it again, over and over. // function changepic() { //Here we will find the image based on it's 'id' attribute, and assign it to a value. image = document.getElementById('**IMG ID**'); //Now we are going to make a small if/then statement to make sure that our vaiable 'whichpic' stays between 0 and 3. if (x >= 3){ x = 0; }; //Now here come the fun part. This is the part that will change the pictures. image.src = pic[x]; //Now we increase 'x' so that the picture will change every time. x = x + 1; //And now we are going to create a timing statement so that this function will be repeated infinitely. The number '10000' is how many miliseconds it will wait until it repeeats. 1000 = 1 second. So right now it is set for 10 seconds. You can change this number as you see fit. t = setTimeout("changepic()",10000); } </script> </head> <body onload="changepic()"> <table> <tr> <td><img width="500" src="images/pic0.jpg" id="**IMG ID**" /></td> <td>HEY LOOK, THE IMAGE CHANGES! JAVASCRIPT IS COOL!</td> </tr> </table> </body> </html> |
.
 |