javascript - 使用 JavaScript 滑动图像

Question

我正在尝试使用 JavaScript 创建一个图像 slider 。

HTML

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

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

脚本

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()

我想以这样的方式滑动两个图像，即将到来的图像显示在第二位并滑动到第一位，并且两个图像都必须是内联的。

我找不到错误。有人可以帮我解决吗？

Answer 1

Internet 上有很多图像 slider 。你可以google他们。

但是，您在上面构建的脚本不会以任何方式创建滑动效果。它只是切换图像并将效果伪造成看起来好像在滑动。

脚本的工作版本看起来像这样。

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