Simple Slideshow in Javascript

By | 13/03/2012

 

Slideshow in a website is an added advantage to cover peoples, By using javascript we can make simple slideshow. But the following javascript for slideshow won’t involve any transition.

 

In this slideshow we are using three images first.jpg, second.jpg, third.jpg.

Have three image named firstcar.gif, secondcar.gif, thirdcar.gif . The following coding should be inside the head tag

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="first.jpg"
var image2=new Image()
image2.src="second.jpg"
var image3=new Image()
image3.src="third.jpg"
//-->
</script>
</head>

This image tag will call the javascript by “name” attribute. This should be inside body.

Select Code
1
2
3
<img src="first.<em>jpg</em>" name="slide" width=100 height=56>

</body>

Below mentioned coding is to change the images in the interval of every 2.5 seconds. Here time is given in milliseconds, we can change the slide time by editing this..

setTimeout(“slideit()”,2500) ->> change 2500 as your wish

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
<!--
//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") // important code in this slide show
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500) }
slideit()
//-->
</script>

Post By prasad (110 Posts)

Website: →

Connect

About prasad

Prasad K has written 110 post in this blog.

Leave a Reply