Image Auto Change using Javascript - BunksAllowed

BunksAllowed is an effort to facilitate Self Learning process through the provision of quality tutorials.

Community

Image Auto Change using Javascript

Share This
On a web page, an image panel can be used to show images one after another, just like a slideshow. The automatic change of the images can be achieved using pure JavaScript only as shown below.  

The following code needs to be saved in an HTML file. To test this code, a few images are to be saved in the same directory, where the HTML file is kept. In this example, the files are 1.jpg, 2.jpg, and 3.jpg. You may use the names of your image files.

If the images are kept in different locations, the fully qualified names of the files or relative paths of the files are mentioned

<!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>Insert title here</title> </head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="1.jpg" var image2=new Image() image2.src="2.jpg" var image3=new Image() image3.src="3.jpg" //--> </script> </head> <body> <img src="1.jpg" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </html>

Happy Exploring!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.