循环访问一系列 DIV 并淡入/淡出

Iterate through an array of DIVs and fadeIn/fadeOut

本文关键字：淡入 淡出 DIV 访问 一系列 循环      更新时间：2023-09-26

我想构建一个简单的横幅图像滑块功能，但图像应该淡入淡出，而不是滑动。

这是一个Drupal项目，所以我不知道将使用多少图像。
结构很简单：

<div class="banner-container">
  <!-- potentially a lot of divs with background images -->
</div>

我想做的本质上是遍历这个div 的"数组"，让当前活动的div 淡出，让数组目前指向的那个淡入。

我想我可以让它像这样工作：

var a = $('#banner-container').children();
while(1) {
  a.each(function(){
    $('.active').fadeOut(500).removeClass('active');
    $(this).fadeIn(500).addClass('.active');
  })
}

显然，我的代码中有很多错误，我遇到了多个问题，但我似乎无法解决的是让循环在迭代之间等待。据我所知，像foreach这样的传统循环可以在它的末尾添加某种wait函数，并在每个循环中执行该wait。但是.each()似乎同时执行每个迭代。我怎样才能遍历这样的数组（可能是无限的）并每次等待 5 秒？

我在某处读到animate函数异步工作，我认为 CSS 转换也是如此，因此创建 fadeIn 和fadeOut类并使用 CSS 尝试此操作是行不通的。

您正在寻找setTimeout和setInterval函数：您将一个超时（以毫秒为单位）的函数传入它们，它们在该毫秒后调用该函数（在setInterval的情况下重复）。

例如：

var a = $('#banner-container').children();
var index = 0;
run();
function run() {
  a.filter('.active').fadeOut(500).removeClass('active');
  a.eq(index).fadeIn(500).addClass('active');
  index = (index + 1) % a.length; // Wraps around if it hits the end
  setTimeout(run, 1000);
}

这将更新第一个div，然后在第二个之后更新下一个div，依此类推。

现场示例：

// Scoping function to avoid creating globals
(function() {
  var a = $('#banner-container').children();
  var index = 0;
  run()
  function run() {
    a.filter('.active').fadeOut(500).removeClass('active');
    a.eq(index).fadeIn(500).addClass('active');
    index = (index + 1) % a.length; // Wraps around if it hits the end
    setTimeout(run, 1000);
  }
})();
#banner-container a {
  display: none;
  position: absolute;
}
#banner-container {
  position: relative;
}
<div id="banner-container">
  <a>one</a>
  <a>two</a>
  <a>three</a>
  <a>four</a>
  <a>five</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在上面，我使用了setTimeout，它只安排一个回调，因为我发现当我调用的东西必须显式重新安排下一次调用时，我写的错误更少。但是您也可以使用setInterval(run, 1000);，它将以大约一秒的间隔调用run，直到/除非您通过clearInterval告诉它停止。

由于JavaScript的性质，你不能为此使用循环，你将不得不使用递归，像这样未经测试的代码应该可以工作。

function loopNext(currentIndex){
     // set the current index on the first call
     if('undefined' === typeof currentIndex) currentIndex=0;
     // the group of image divs
     var images = $(".imagesDivs");
     // if the current index doesn't exist, 
     // we've looped thru them all, reset the index
     if('undefined' === typeof images.eq(currentIndex)) currentIndex=0;
     // fade out the previous one and fade in the first one
     images.fadeOut('slow', function(){
         images.eq(currentIndex).fadeIn('slow');
     });
     // fade the next one every 3 seconds or so
     setTimeout(function(){
          loopNext(currentIndex+1);
     }, 3000);
}

要启动循环，您可以在没有任何参数的情况下调用它。

loopNext();

您可以使用setTimout并转到下一个元素或重新开始：

setTimout(function(){
     var current = $('.active');
     var next = current.next().length > 0 ? current.next() : $('.banner-container > div').first(); 
     current.fadeOut(500).removeClass('active');
     next.fadeIn(500).addClass('.active');
},5000);
相关文章：