1

我正在尝试使用 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()

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

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

4

2 回答 2

1

互联网上有很多图像滑块。你可以谷歌他们。

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

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

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

演示

于 2012-05-05T11:32:08.727 回答
1

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

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

于 2012-11-22T11:20:30.343 回答