Question

我正在尝试使用JavaScript创建图像滑块。

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

互联网上有很多图像滑块。你可以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

Answer 2

图像滑块很容易在java脚本中设计。您只需要一个容器，在其上显示图像或幻灯片，以及一个将旋转或滑动图像的脚本。滑动可以是随机的或顺序的。检查以下链接，该链接显示带有脚本的手动滑块。

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

使用JavaScript滑动图像

2 个答案: