Website Scripts And Cloud Tutorials

Simple Javascript Slideshow

Byadmin

Mar 18, 2009

Last updated on May 10th, 2016 at 10:28 pm

Click to rate this tutorial!
[Total: 14 Average: 3.4]

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>

    Click to rate this tutorial!
    [Total: 14 Average: 3.4]
    2 thoughts on “Simple Javascript Slideshow”

    Leave a Reply

    Your email address will not be published.