2

JSFiddle 在这里...

http://jsfiddle.net/Vd8PJ/10/

好的。我正在尝试创建一个 JQuery 轮播来显示一些不同宽度的图像。为了帮助实现这一点，我试图在包含图像的无序列表上向右生成一个无缝的、无休止的幻灯片。我计划用 .before 属性将已经超过阈值的图像放在其余图像后面，这样它就会永远持续下去。但是，我有三个问题。

第一个问题是，如果我的 JS 看起来像这样......

$(document).ready(function() { 
    function gallery () {
    $("#image").animate({"margin-left":"200px"}, 3000);
    }
setInterval(gallery, 3000);
});

它等待 3 秒，并且只运行一次。我确实环顾四周，看看我是否可以解决唯一的运行一次问题，我发现了这个......

setInterval() 只运行一次函数

还有许多其他类似的问题。总是一样的。他们正在调用这样的函数......

setInterval(gallery(), 3000);

在 setInterval 中，而不是像这样......

setInterval(gallery, 3000);

所以，我知道这不是解决方案。考虑到我的函数后面已经没有括号，并且被称为正确的方法。（我认为。）

所以，从逻辑上讲，我试图解决下一个问题，三秒延迟。我写了这个...

$(document).ready(function() { 
    $("#image").animate({"margin-left":"200px"}, 3000);
    function gallery () {
        $("#image").animate({"margin-left":"200px"}, 3000);
    }
    setInterval(gallery, 3000);
});

现在它在页面加载时立即运行，但是由于 setInterval 之前只运行一次，我假设我会得到两次......

$("#image").animate({"margin-left":"200px"}, 3000);

一个在负载下运行，另一个通过 setInterval 从“gallery”函数运行。然而事实并非如此。它立即运行，但我只出现一次。

我的最后一个问题与 setInterval 无关，但我想我会用一块石头杀死两只鸟。因为我的无序列表的宽度为 9,999 像素，这是否意味着即使我连续运行动画，最终我也会用完元素来移动？

先谢谢了！

4

1 回答 1

2

看起来它只运行一次

$("#image").animate({"margin-left":"200px"}, 3000);

当函数第一次运行时，margin-left:200px它已经设置为提供的属性。

所以下次运行时，属性没有变化margn-left。所以它看起来是静态的

我想你正在寻找

$("#image").animate({"margin-left":"+=200"}, 3000);

使用+=将增加每次函数运行时提供的值。

检查小提琴

于 2013-07-10T00:04:11.540 回答