Home Javascript Javascriptexamples JavaScript Slideshow
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

JavaScript Slideshow

Advertisement
This page discusses - JavaScript Slideshow

JavaScript Slide Show

        

In this section, you will learn how to create slide show using JavaScript.

To display a series of images in an automated slide show, we have created five instances of the image object referring their images. We have inserted the first image of the slide show using html <img> tag. By its name attribute, we enables JavaScript to access and manipulate the image. A variable 'step' is initialize to1 that will increment through the images.

The document.images.img.src accesses the path of image "img" using the image object. The eval("image"+step+".src") is evaluated dynamically to assign a new image path that results into the changed image. By using the JavaScript method setTimeout("slideImages()",1000), we can call the function slideImages() after every one second.

Here is the code:

<html>
<h2>Slide Show</h2>
<script type="text/javascript">
var image1=new Image()
image1.src="rose.jpg"
var image2=new Image()
image2.src="lotus.jpg"
var image3=new Image()
image3.src="lily.jpg"
var image4=new Image()
image4.src="sunflower.jpg"
var image5=new Image()
image5.src="marigold.jpg"
</script>
</head>
<img src="rose.jpg" name="img" width="250" height="150" />
<script>
var step=1
function slideImages(){
if (!document.images)
return
document.images.img.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
setTimeout("slideImages()",1000)
}
slideImages()
</script>
</html>

Output will be displayed as:

Download Source Code:

        

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Ask Questions?    Discuss: JavaScript Slideshow  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com