Question

是否有可能在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);

   });
}

Answer 1

解决方案：

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

已编辑答案（第2节）：

Top Image的z-index为“3”。下面的图像放在下面是使用z-index为'2'。因此，通过淡出顶部图像，您会产生无缝淡化的印象。

DEMO： http://jsfiddle.net/UhJm6/1/

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

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

Answer 2

您可以使用Javascript的setTimeout()函数创建无限循环。

了解更多here。

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

或者你可以使用这个

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

Answer 3

您可以使用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);
});

示例here

Answer 4

让我们假设您要在下面的数组上连续执行“每个”操作：

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 ...

在jQuery中连续迭代each（）循环？

4 个答案: