0

是否可以在 jQuery 中连续运行 each() 循环？

我有一个相互淡入淡出的图像幻灯片，但是当它到达最后一张图像时它会停止。我的代码如下：

jQuery

$('.slider-block').each(function(i) {

$(this).delay(4000*i).fadeTo(1000,1);

});

HTML

<div class="slider-block">

<img src="image1.png" />

</div>

<div class="slider-block">

<img src="image2.png" />

</div>

CSS

.slider-block { display: none; position: absolute; top: 0px; left: 0px; }

我的目标是让它遍历所有图像，然后回到第一个并重新开始。

所有的 HTML 和 CSS 都可以正常工作，它真的只是我需要帮助的 jQuery 部分。

**更新**

根据建议，我尝试了以下方法，但是这些都没有重新开始：

setTimeout(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

和

setInterval(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

这个让我的浏览器崩溃

while(true)
{
   $('.slider-block').each(function(i) {

       $(this).delay(4000*i).fadeTo(1000,1);

   });
}
4

4 回答 4

2

解决方案： 

function cycleImages(){
    var $active = $('#slider-container .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('.slider-block:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
}        
$(function(){
    // run every 4s
    setInterval('cycleImages()', 4000);            
});

编辑答案（v2）：

顶部图像的 z-index 为“3”。下一张图片位于下方，使用的 z-index 为“2”。因此，通过淡出顶部图像，您会有一种无缝淡入的印象。

演示：http: //jsfiddle.net/UhJm6/1/

注意：由于透明度问题，此解决方案不适用于“.png”类型的图像。按喜好使用 JPEG 图像。

来源：http ://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

于 2013-04-24T11:01:44.433 回答
1

您可以使用setTimeout()Javascript 的功能来创建无限循环。

在这里阅读更多。

如果您不想暂停，只需相应地设置超时时间。

或者你可以使用这个

While(true)
{
   $('.slider-block').each(function(i) {
       $(this).delay(4000*i).fadeTo(1000,1);
   });
}
于 2013-04-24T10:35:53.497 回答
0

您可以使用完整的参数fadeTo来设置下一个淡入淡出，如下所示：

function fadeImg(i) {
    $('.slider-block').eq(i).delay(4000 * i).fadeTo(1000, 1, function () {
        fadeImg(i);
    });
}
$('.slider-block').each(function (i) {
    fadeImg(i);
});

但是一旦到达循环的末尾，您就必须将它们隐藏起来，否则它们将被最后一个隐藏。类似的东西：

function fadeIn(i) {
    $('.slider-block').eq(i).delay(4000 * i).fadeTo(1000, 1, function () {
        fadeIn(i);
        fadeOut(i);
    });
}
function fadeOut(i) {
    $('.slider-block').eq(i).delay(4000 * (i+1)).fadeTo(1000, 0);
}
$('.slider-block').each(function (i) {
    fadeIn(i);
});

样品在这里

于 2013-04-24T11:00:58.417 回答
0

让我们假设你想在下面的数组上连续做一个“每个”：

var your_array = [1, 2, 3];

您可以编写一个在此数组上行走的函数，然后当您到达最后一个时，您可以再次运行该函数：

var your_array = [1, 2, 3];
next = function () {
    var length = your_array.length,
        new_num;
    $.each(your_array, function(key, value) {
        new_num = value;
        if (length == key+1) {//we understand that we reached to the end of array
            alert(new_num);
            next();
        } else {
            alert(new_num);
        }

    });
}
next(); //output: 1 2 3 1 2 3 1 2 3 ...
于 2019-02-04T06:05:43.570 回答