0

我已经为包含在一个名为“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>
4

1 回答 1

1

您的代码是在假设只有一个幻灯片放映的情况下编写的。

要处理多个幻灯片放映，您必须遍历mainSlide元素，并对slideShow每个元素执行函数中的所有操作。此外，您必须mainSlide在处理图像时将每个元素用作范围，以便代码仅适用于该元素中的图像。

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

function slideShow(slide) {

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

  // and so on...

}
于 2012-12-02T22:20:49.883 回答