May 5, 2012
Sliding image using JavaScript
Question by Diwash Regmi
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 by Starx
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();
