JavaScript Slideshow script using image object

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 ){ = "hidden";
}else{ = "visible";}
Same way at the first slide we will make previous button hidden.

if(present_slide+1 >= images.length ){ = "hidden";
}else{ = "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.

 <title>(Type a title for your page here)</title>
 <script language="JavaScript">
 var present_slide=0; 
var images = new Array('', '', '','','', ''); 
objImage = new Image(); 
function download(img_src){ 
// preload the image file 
 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 )
{ = "hidden"; 
}else{ = "visible";
 if(present_slide<=0 ){ = "hidden"; present_slide=0; 
}else{ = "visible";
<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);">

Subscribe to our YouTube Channel here


* indicates required
Subscribe to plus2net

    More on JavaScript Image Object
    Image SlideShow Script using navigational buttons
    Image Loading to cache while page load by Image object
    Reloading the image without refreshing the page
    Image Rotator Script for automatic Slideshow
    Image Move across by button click
    Image Move continuously across screen
    Image offSetLeft and offSetTop to get position of the image from left and top
    Image Position : Positioning an image by assigning value to and style.left
    Image width: Managing width of the image
    Image height: managing height of the image
    Image align: Image align left or right
    Image border: adding and removing border from Image
    Image alt: updating or reading alt message of image

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer