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

我试图使用各项功能，但是，它似乎并没有在所有的工作：

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>