Question

JSFiddle就在这里......

好的。我试图创建一个JQuery轮播来显示不同宽度的图像。为了帮助实现这一目标，我试图在包含图像的无序列表中生成一个无缝的，无休止的幻灯片。我计划将已经超过阈值的图像放在.before属性之后，以便它将永远持续下去。但是，我有三个问题。

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

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

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

setInterval() only running function once

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

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

一个正在加载，另一个是从＆＃34;画廊＆＃34;函数由setInterval。然而事实并非如此。它立即运行，但我只有一次出现。

我的最后一个问题与setInterval没有任何关系，但我想我会一石二鸟。因为我的无序列表的宽度为9,999像素，这是否意味着即使我连续运行动画，最终我会耗尽元素移动？

先谢谢！

Answer 1

看起来它只运行一次

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

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

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

我认为你在寻找

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

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

<强> Check Fiddle

setInterval只运行一次？

1 个答案: