The following HTML Content will demonstrate how to Set up a Picture Slide Show in HTML by using JavaScript:
Steps:
1. Create an images source array
2. Create one image element.
3.write a function in javascript to call the images source from array
4.use this "return document.images.slide.src=eval("image"+step+".src")"
Note : ("image"+step+".src") here step is next slide
HTML Code:
=========
<html>
<head>
<title>Images Slide Show in HTML by using Simple JavaScript</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="http://www.maniacworld.com/amazing-cars.jpg"
var image2=new Image()
image2.src="http://t3.gstatic.com/images?q=tbn:ANd9GcRmWwe3v7C2chaFhcS1mS5js5maQ2mZhpIrx37n5Q3I1vxK6QjUyA&t=1"
var image3=new Image()
image3.src="http://www.walkthroughindia.com/wp-content/uploads/2011/01/Honda-Jazz.jpg"
//-->
</script>
</head>
<body>
<center>
<img width="60%" height="60%" src="http://im.rediff.com/movies/2008/apr/01spotted.jpg" name="slide" width="100" height="56" />
</center>
<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>
</body>
</html>
Steps:
1. Create an images source array
2. Create one image element.
3.write a function in javascript to call the images source from array
4.use this "return document.images.slide.src=eval("image"+step+".src")"
Note : ("image"+step+".src") here step is next slide
HTML Code:
=========
<html>
<head>
<title>Images Slide Show in HTML by using Simple JavaScript</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="http://www.maniacworld.com/amazing-cars.jpg"
var image2=new Image()
image2.src="http://t3.gstatic.com/images?q=tbn:ANd9GcRmWwe3v7C2chaFhcS1mS5js5maQ2mZhpIrx37n5Q3I1vxK6QjUyA&t=1"
var image3=new Image()
image3.src="http://www.walkthroughindia.com/wp-content/uploads/2011/01/Honda-Jazz.jpg"
//-->
</script>
</head>
<body>
<center>
<img width="60%" height="60%" src="http://im.rediff.com/movies/2008/apr/01spotted.jpg" name="slide" width="100" height="56" />
</center>
<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>
</body>
</html>
Live Example by RamasubbaReddy
No comments:
Post a Comment