功能不適用於所有div同級

Question

我創建了一個幻燈片圖像包含在一個名爲「mainSlide」類的div，這完美的作品，但當我嘗試創建具有相同的類名「mainSlide」的另一個div，我沒有看到第二個div上的任何幻燈片效果只是第一個。

<div class="mainSlide"> 
<img src="img/1.jpg" style="display:none;" /> 
<img src="img/2.jpg" style="display:none;" /> 
<img src="img/3.jpg" style="display:none;" /> 
</div> 
<br /><br /><br/><br /> 

<div class="mainSlide"> 
<img src="img/1.jpg" style="display:none;" /> 
<img src="img/2.jpg" style="display:none;" /> 
<img src="img/3.jpg" style="display:none;" /> 
</div> 


<script type="text/javascript"> 
$(document).ready(function() { 

slideShow(); 

function slideShow() { 
    $allSlides = $('div.mainSlide img').length; 
    $hiddenSlides = $('div.mainSlide img:hidden').length; 

    if ($hiddenSlides == $allSlides) { 
     $('div.mainSlide img:first').fadeToggle('slow', function() { slideShow(); }); 
    } else { 
     $('div.mainSlide').find('img:visible').delay(5000).fadeToggle('slow', 
      function() { 
       if ($(this).attr('src')==$('div.mainSlide img:last').attr('src')) { 
        $('div.mainSlide img:first').fadeToggle('slow', function() { slideShow(); }); 
       } else { 
        $(this).next('img').fadeToggle('slow', function() {slideShow();}); 
       } 
      }); 
    } 
} 

}); 
</script> 

Answer 1

您的代碼是在假設只有一個幻燈片放映的情況下編寫的。

要處理多個幻燈片演示，您必須遍歷mainSlide元素，並在每個元素上執行slideShow函數中的所有操作。此外，在處理圖像時，必須將每個mainSlide元素用作範圍，以便代碼僅適用於該元素中的圖像。

$('div.mainSlide').each(function(i, slide){ 
    slideShow(slide); 
}); 

function slideShow(slide) { 

    $allSlides = $('img', slide).length; 

    // and so on... 

}