javascript - 添加类jquery循环

Question

我正在开发一个网络项目，该项目的背景图像每隔几秒钟就会发生变化。问题是我不知道如何在所有图像完成旋转后返回第一个图像。第三张图像后，屏幕变白。

html:

<section class="slideshow">
    <img src="img/img1.png" class="bgM show"/>
    <img src="img/img2.png" class="bgM"/>
    <img src="img/img3.jpg" class="bgM"/>                   
</section>

JavaScript

function switch() {
    var $active = $('.slideshow IMG.show');
    var $next = $active.next(); 
    var $images = new Array(); 
    var $length = $images.length;

    $next.addClass('show');

    $active.removeClass('show');

    if ($images[$length].hasClass('show')) {
        $images[0].addClass('show');
    }
}

$(function() {
    setInterval( "switch()", 8000 );
});

Answer 1

jsFiddle Demo

不需要额外的代码。只需对图像元素集使用带有 mod 的迭代器即可。

$(function() {
 var slide = $(".slideshow"), cur = 0;
 setInterval(function(){
  $('.show',slide).removeClass('show');
  $('img',slide).eq((++cur)%3).addClass('show');
 }, 1000 );//using 1000 just for demo purposes
});

.slideshow img.show{
    border:2px solid red;
    display:block;
}
.slideshow img{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideshow">
            <img src="http://placehold.it/350x150" class="bgM show"/>
            <img src="http://placehold.it/250x150" class="bgM"/>
            <img src="http://placehold.it/150x150" class="bgM"/>                   
</section>