Question

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

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

$counter

我想要做的是基本上迭代这个div的“数组”，让当前活动的一个淡出，然后让数组指向的那一个淡入。

我以为我可以这样工作：

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

显然我的代码中存在很多错误，我遇到了多个问题，但我似乎无法解决的问题是让循环在迭代之间等待。据我所知，像var a = $('#banner-container').children(); while(1) { a.each(function(){ $('.active').fadeOut(500).removeClass('active'); $(this).fadeIn(500).addClass('.active'); }) }这样的传统循环可以在其末尾添加某种foreach函数，并在每个循环中执行wait。但wait似乎同时执行每次迭代。我怎样才能像这样循环一个数组（可能是无限的）并且每次等待5秒钟？

我在某处读到.each()函数异步工作，我假设CSS转换也是如此，因此创建animate和fadeIn类并尝试使用CSS不会工作

Answer 1

您正在寻找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，等等。

直播示例：

＆＃13;

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

＆＃13;

#banner-container a {
  display: none;
  position: absolute;
}
#banner-container {
  position: relative;
}

＆＃13;

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

＆＃13;

在上面，我使用了setTimeout，它只调度单个回调，因为我发现当我调用的东西有错误时，我写的错误更少明确重新安排下一个电话。 :-)但是你也可以使用setInterval(run, 1000);以大约一秒的间隔调用run，直到/除非你告诉它通过clearInterval停止。

Answer 2

你不能使用循环，因为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();

Answer 3

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

迭代一系列DIV和fadeIn / fadeOut

3 个答案: