This is a continuation of the previous post, stating how to create slideshow for our website through the use HTML and Javascript;
Step 3: Add in the html codes necessary to
display the first image of the slide show.
<body>
<img src="firstcar.gif" id="slide" width=100 height=56 />
</body>
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 core of this script is the part in red:
document.getElementById('slide').src = slideimages[step].src
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.
Step 5: Putting it all together.
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 object src property to an image's src, preloading that 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>
Copied from the net.. javascriptkit.com
No comments:
Post a Comment