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>