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

我试图使用每个函数，但它似乎根本不起作用：

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>

JQuery幻灯片代码无法使用多个幻灯片放映

1 个答案: