Question

我为包含在div中的图像创建了一个幻灯片，其中包含名为“mainSlide”的类，这很有效，但是当我尝试创建另一个具有相同类名“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...

}

函数不适用于具有相同类的所有div

1 个答案: