Simple Javascript Slideshow

This Tutorial Has Been Viewed 17,829 Times.

Posted by admin on March 18, 2009, filed in: JavaScripts

Rating: 5.8/10 (12 votes cast)

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)

Incoming search terms:

You will also be interested in ,

Tags: array, Email, JavaScripts

« Previous

How to close a child window from a parent window using javascript

Caching of images using javascript image object

2 Responses

CannonLina29 says:

August 27, 2010 at 8:42 pm

This is what I was looking for a while! Appreciate for this.

VA:F [1.9.17_1161]
please wait...
Rating: 0.0/5 (0 votes cast)

Reply
Hosting forums says:

February 28, 2012 at 1:26 pm

Nice post,thanks for sharing..

VA:F [1.9.17_1161]
please wait...
Rating: 0.0/5 (0 votes cast)

Reply