In HTML image addition we discussed already. Now we will make a image slideshow in HTML page. This is really very important article for those who wanna make a dynamic web page.
Let's start making a slideshow.
1) First we will write our HTML page as usual.
<html>
<head><title>slideshow</title>
</head>
<body><?body>
</html>
2) For image slideshow first we introduce our images. This will do by introducing script inside head tag.
<script type="text/javascript">
var a1 = new Image()
a1.src ="a.jpg"
var a2 = new Image()
a2.src = "b.jpg"
var a3 = new Image()
a3.src = "c.jpg"
var a4 = new Image()
a4.src = "d.jpg"
</script>
3) Now images are added. Let's start implements them into body of web page. For this we will add a first display image on web page using HTML image addition tag.
<img src = "a.jpg" name ="slide" height="400" width ="400">
4) Now we again introduce a script inside body of web page. This script will make slideshow operations.
<script type="text/javascript">
var number = 1
function slideit() {
document.images.slide.src = eval("a"+number+".src")
if(number<4)
number++
else
number=1
setTimeout("slideit()",1500)
}
slideit()
</script>
In above script we make a variable "number" (you can make any word you wants). This variable initialize as 1. After that we made a function "slideit", In this function we used a javascript command which evaluate images one by one. A loop introduced after that with will run till last image. The variable number will change in every count of the loop as 1,2,3,4. This will change image source as a1,a2,a3,a4. After that a timeout command introduced for slideit function with time difference 1500 ms.
Now run the program, I am sure it will work fine.
Let's start making a slideshow.
1) First we will write our HTML page as usual.
<html>
<head><title>slideshow</title>
</head>
<body><?body>
</html>
2) For image slideshow first we introduce our images. This will do by introducing script inside head tag.
<script type="text/javascript">
var a1 = new Image()
a1.src ="a.jpg"
var a2 = new Image()
a2.src = "b.jpg"
var a3 = new Image()
a3.src = "c.jpg"
var a4 = new Image()
a4.src = "d.jpg"
</script>
3) Now images are added. Let's start implements them into body of web page. For this we will add a first display image on web page using HTML image addition tag.
<img src = "a.jpg" name ="slide" height="400" width ="400">
4) Now we again introduce a script inside body of web page. This script will make slideshow operations.
<script type="text/javascript">
var number = 1
function slideit() {
document.images.slide.src = eval("a"+number+".src")
if(number<4)
number++
else
number=1
setTimeout("slideit()",1500)
}
slideit()
</script>
In above script we make a variable "number" (you can make any word you wants). This variable initialize as 1. After that we made a function "slideit", In this function we used a javascript command which evaluate images one by one. A loop introduced after that with will run till last image. The variable number will change in every count of the loop as 1,2,3,4. This will change image source as a1,a2,a3,a4. After that a timeout command introduced for slideit function with time difference 1500 ms.
Now run the program, I am sure it will work fine.
