Simple Javascript Slideshow

Here i will explain how to create a simple slideshow using javascript.

Our main function displaynext(shift) will receive the value of shift based on the navigational buttons clicked ( it will either +1 or -1 ) and it will receive the value of 0 at the time of page load. Inside the function first the value of present slide is changed after adding the value of shift with present slide value. Then by one if condition the value of slide is checked as it should be within the values of image array. The value should be between 0 and number of element in the array. Once the if condition is satisfied, by using the .src property of the image element of the document the image is displayed. In the next line we will download the next image to be shown at background to cache. This way the next image can be shown immediately without any time delay. Here is the code of displaynext function.

function displaynext(shift){
present_slide=present_slide + shift;

if(images.length > present_slide && present_slide >= 0){
document.images[''im''].src = images[present_slide];

var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}

At the time of page load we will pass a value of 0 to displaynext function to display the first element of the image array. While displaying this first element since the present slide value will be 0 so the previous button will not be visible. Here is the complete code of the slide show page.

<html>
<head>
<title>(Type a title for your page here)</title>
<script language="JavaScript">
var present_slide=0;
var images = new Array("http://www.anyserver/image//2435.jpg",
 "http://www.anyserver/image//2436.jpg",
 "http://www.anyserver/image//2437.jpg",
 "http://www.anyserver/image//2438.jpg",
 "http://www.anyserver/image//2439.jpg",
 "http://www.anyserver/image//2440.jpg",
"http://www.anyserver/image//2441.jpg",
 "http://www.anyserver/image//2442.jpg");
objImage = new Image();
function download(img_src){
 // preload the image file
objImage.src=images[img_src];
}
function displaynext(shift){
 present_slide=present_slide + shift;
 if(images.length > present_slide && present_slide >= 0){
document.images[''im''].src = images[present_slide];
var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}
if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
 }else{document.f1.Next.style.visibility = "visible";}
if(present_slide< =0 ){
document.f1.Prev.style.visibility = "hidden";
 present_slide=0;
}else{
 document.f1.Prev.style.visibility = "visible";}
 }
</script>
 </script></head>
<body onLoad="displaynext(0)">
 <form name="f1? method=post action="">
 <img name="im" /><br />
 <input type="button" name="Prev" value=" << " onClick="displaynext(-1);"/>
 <input type="button" name="Next" value=" />> " onClick="displaynext(1);">
 </form>
 </body>
 </html>

Rating: 5.8/10 (12 votes cast)

Rating: -1 (from 1 vote)

M	T	W	T	F	S	S
« Jan
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

Latest Tutorials

Incoming search terms:

You will also be interested in ,

One Response to “Simple Javascript Slideshow”

Leave a Comment

Join Us On Facebook

Tutorial Tracker

Recent Search

Tutorial Hits

Recent Tutorials

Popular Search Terms

Yearly Tutorial Submit

More in Html, PHP, scripts, xml (116 of 159 articles)