Sliding image using JavaScript

Question

I am trying to create a image slider, using JavaScript.

HTML

<img src="firstcar.gif" name="slide" width="100" height="56" />

<img src="secondcar.gif" name="slide1" width="100" height="56" />

Script

var image1 = new Image()
image1.src = "firstcar.gif"
var image2 = new Image()
image2.src = "secondcar.gif"
var image3 = new Image()
image3.src = "thirdcar.gif"

//variable that will increment through the images
var step = 1

function slideit() {
    //if browser does not support the image object, exit.
    if (!document.images) return
    document.images.slide.src = eval("image" + step + ".src")
    if (step < 3) step++
    else step = 1
    //call function "slideit()" every 1.5 seconds
    setTimeout("slideit()", 1500)
}
slideit()

I wanted to slide two image in such a way that the upcoming image displays in the second place and slides to the first place and both the image must be inline.

I can't find the error. Can someone help me fix it?

Answer 1

There are lots of image sliders available on the internet. You can google them.

However, the script you are building above does not create sliding effect in any way. It just switches the image and fakes the effect to looks like as if it was sliding.

The working version of the script will look something like this.

var step = 1;

function slideit() {
    //if browser does not support the image object, exit.
    var img = document.getElementById('slide');
    img.src = "image" + step + ".src";
    console.log(img.src);
    if (step < 3) step++;
    else step = 1;
    //call function "slideit()" every 1.5 seconds
    setTimeout(slideit, 1500);
}
window.onload = slideit();

Demo