addClass jquery loop

Question

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

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>

Answer 2

第一个主要问题是，你的功能switch是一个保留字(即选择另一个名称[我选择switch_images])。

接下来，您可以检查"Next"图像是否存在(.length)。如果没有，则将其设置为幻灯片中的第一张图像:

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function switch_images() {
    var $active = $('.slideshow IMG.show');
    var $next = $active.next();
    if(!$next.length){
        $next = $('.slideshow IMG:first');
    }
    $active.removeClass('show');
    $next.addClass('show');
}
$(function() {
    setInterval( "switch_images()", 8000 );
});
</script>