Question

我正在尝试创建一个旋转木马效果，每隔3秒自动循环显示每张图片。

    $(".headline_img").each(function(intIndex){
        setTimeout($(this).show(),3000);
    });

超时延迟无效。

这会在dom加载后立即显示所有图像。这就像它忽略了setTimeout函数。

我错过了什么吗？

注意：我使用$（document）.ready调用它，您认为这可能会影响它吗？

Answer 1

setTimeout函数采用函数引用或字符串。您的代码会立即为每个元素调用show方法。我不确定这是否有效：

$(function () {
  var t = 3000, $debug = $('#result');
    $(".headline_img").each(function(){
      var $img = $(this);
        setTimeout($img.show.bind($img), t);
      t += 3000;
    });
});

.headline_img { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headline_img">One</div>
<div class="headline_img">Two</div>
<div class="headline_img">Three</div>

但是值得一试......

Answer 2

您需要更改每个的超时。现在，您同时将相同的超时附加到所有这些超时。这样的事情应该可以在不改变你的代码的情况下工作：

$(".headline_img").each(function(intIndex){
    setTimeout($(this).show(),3000 * (intIndex +1));
});

从长远来看，重构使用queue可能会更加强大。

Answer 3

或者您可以使用jQuery的delay功能。

$(".headline_img").each(function(intIndex){
    $(this).delay(3 * (intIndex + 1)).show();
});

jQuery：在每个迭代器中使用时间延迟？

3 个答案: