Slideshow using core javascript

Slideshow using core javascript

Here is a simple slideshow using core javascript.If uou want to stop the slideshow, click on the Stop button.

Design 1:

This is the simplest. Just define images in your javascript code using imageObj=new Image(). Here, I define three images. These images will be accessed in a function of javascript.Document.images.imageName can target your image in the page. Lets see the code


Play Stop
var image1= new Image();
image1.src="../gallery/flower/one.jpg";
var image2= new Image();
image2.src="../gallery/flower/two.jpg";
var image3= new Image();
image3.src="../gallery/flower/three.jpg";

var step=1;
var repeater;
function slideit(){
    if(!document.images)return;
    document.images.slide.src=eval("image"+step+".src");
    if (step<3)step++;
    else step=1;
    repeater=setTimeout("slideit",2500);
}
    

The function slideit() neeed to be used somwhere. One option is to use it in the body onload event or window onload event. Another option is to aply in a button. In this example, a button is used to control the silide show. Let's see the html code.

    <img src="../gallery/flower/one.jpg" alt="" id="slide" name="slide" />
    <br />
    <input type="button" value="Play" onclick="slideit();" />
    <input type="button" value="Stop" onclick="clearTimeout(repeater);" />
    

Design 2

This design is almost the same as previous but only the difference is, the slideshow has a blend transition effect and the effect only works in IE. Here is the javascript part for the blend transition effect.


Play Stop
function slideit2(){
    if(!document.images)return;
    if(document.images.slide2.filters){
        document.images.slide2.style.filter="blendTrans(duration=2)";
        document.images.slide2.filters.blendTrans(duration=5).Apply();
        document.images.slide2.filters.blendTrans.Play();
    }
    document.images.slide2.src=eval("image"+step2+".src");
    if (step2<3)step2++;
    else step2=1;
    repeater2=setTimeout("slideit2",2500);
}
    

Thats it. Hope you can also design a slideshow using the script provided here.

No  Responses to "Slideshow using core javascript"

Leave a Reply