jquery - 同じクラスのすべてのdivに適用されない関数

Question

「mainSlide」というクラスのdivに含まれる画像のスライドショーを作成しました。これは完全に機能しますが、同じクラス名「mainSlide」の別のdivを作成しようとすると、2番目のdivにスライドショーの効果が表示されません。最初の1つ。

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