javascript - JQuery 幻灯片代码无法播放多个幻灯片

Question

我一直在编写幻灯片代码，如果您正在运行一个幻灯片，该代码就可以工作，但是，我想要多个。该代码选择事件类(已成功完成两个幻灯片放映)，并删除并添加该类(再次成功完成)，但是，一旦循环一次，它就无法选择下一张幻灯片。

我以前的代码如下所示:

 setInterval(function(){
var $currentSlide = $('.active');
var $nextSlide = $currentSlide.next();
if ($nextSlide.length === 0){
  $nextSlide = $('.jumbotron').first();
}
$currentSlide.fadeOut(500).removeClass('active');
$nextSlide.fadeIn(500).addClass('active');

}, 9000);

我尝试使用each函数，但是，它似乎根本不起作用:

setInterval(function(){
  $('.slideshow').each(function(){
  var $currentSlide = $(this).find('.active');
  var $nextSlide = $currentSlide.next();
  if ($nextSlide.length === 0){
    $nextSlide = $(this).firstChild();
  }
  $currentSlide.fadeOut(500).removeClass('active');
  $nextSlide.fadeIn(500).addClass('active');

});
}, 1000);

任何帮助将不胜感激。谢谢。

Answer 1

这是您要找的吗？您的代码很好，除了 $nextSlide = $(this).firstChild(); 出现错误。只需将其更改为 $nextSlide = $this.children().first();

setInterval(function() {
  $('.slideshow').each(function() {
    var $this = $(this);
    var $currentSlide = $this.find('.active');
    var $nextSlide = $currentSlide.next();
    if ($nextSlide.length === 0) {
      $nextSlide = $this.children().first();
    }
    $currentSlide.fadeOut(500).removeClass('active');
    $nextSlide.fadeIn(500).addClass('active');

  });
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
  <div class="active">Slide 1</div>
  <div>Slide 2</div>
</div>

<div class="slideshow">
  <div class="active">Slide 3</div>
  <div>Slide 4</div>
</div>