Sliding image using JavaScript - Stack Overflow

admin管理员组

文章数量:1418616

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 uping 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?

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 uping 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?

• javascript
• sliding

Share Improve this question Follow edited May 13, 2012 at 3:09 Starx 79.1k5050 gold badges187187 silver badges265265 bronze badges asked May 5, 2012 at 9:28 Diwash RegmiDiwash Regmi 2511 gold badge22 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

Image slider are pretty easy to design in java-script. All you need is a container on which the images will be shown or slides and a script which will rotate or slide the images. The sliding can be random or in a sequence. Check the below link which displays a manual slider with the script.

http://www.encodedna./2012/11/javascript-thumbnail-slider.htm

本文标签： Sliding image using JavaScriptStack Overflow