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

第一个主要问题是你的函数Array ( [0] => 5d354f42dcc5651fxe6d1a21b74cd [1] => Array ( [username] => yourusername [home] => /home [mail_server] => Mailbox14 [web_server] => Webxxx [id] => 123456 ) )是一个保留字（即选择另一个名字[我选择了switch_images]）。

接下来，您可以查看“下一张”图片是否存在（switch）。如果没有，则将其设置为幻灯片中的第一个图像：

.length

Answer 2

<强> jsFiddle Demo

无需额外的代码。只需使用带有mod的迭代器作为图像元素集。

  - name:  Install myApp
    hosts: tag_app_prod[1-25]
    sudo: yes
    roles:
      - { role: myApp, master: "false" }

$(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;
}

addClass jquery循环

2 个答案: