JavaScript Image Slideshow script

We can create a slideshow by using client side JavaScript. Here for the slide show we will take a set of images and store them in an array. Inside the array only image address will be stored not the image. We will use image object to download and display the image. We will be downloading the next image while viewing any image in our slide show. Read the tutorial on how to download images at background to cache here.

In our script we will first create an array with urls of the images as array element. We will create an image object and inside the function download we will use this image object to download image at background to cache. This download function will be called once we successfully display an image from the array. Before that let us try to understand the buttons we will be using in our slide show.

We will be using two buttons to navigate in our slideshow. One button will move one step forward and other button will move one step backward. So each button will carry one value either +1 or -1 to tell what should be the next picture. The function name displaynext() receives these values and display the corresponding image. You can understand that at the last slide ( or image ) the NEXT button should be disabled as there is no next image . Same way at first slide the PREVIOUS button should be disabled. To work in all the browsers we will make it visible or hidden rather than making it enable or disable. Here is the code which will make NEXT button hidden at the last slide.

if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
}else{document.f1.Next.style.visibility = "visible";}

Same way at the first slide we will make previous button hidden.

if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
}else{document.f1.Next.style.visibility = "visible";}

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('https://www.example.com/8413.jpg', 'https://www.example.com/8414.jpg', 'https://www.example.com/8415.jpg','https://www.example.com/8416.jpg','https://www.example.com/8417.jpg', 'https://www.example.com/8418.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>
 </head> 
<body onLoad=displaynext(0);>
 <form name="f1" method=post action=''''> <img name="im" ></a>
<br> <input type="button" name="Prev" value=" << " onClick="displaynext(-1);"> 
<input type="button" name="Next" value=" >> " onClick="displaynext(1);">
 </form>
 </body>
 </html>

Image Object

Subscribe to our YouTube Channel here

JavaScript Slideshow script using image object

Subscribe