Question

<div class="cont">
<ul>
    <li  class="Show"><img src="images/1.jpg" alt="1" /></li>
    <li><img src="images/2.jpg" alt="2" /></li>
    <li><img src="images/3.jpg" alt="3" /></li>
    <li><img src="images/4.jpg" alt="4" /></li>           
</ul>  

.Show {
   display: block;
 }
 li {
   display: none;
 }

 jQuery(document).ready(function () {
 setInterval(function() {   
   jQuery('.Show').removeClass('Show').next().addClass('Show');
 }, 1000);
});

嗨，我希望所有图像结束后图像循环播放，它应该从重新开始感谢。

Answer 1

jQuery(document).ready(function () {
    var my_interval = setInterval( function () {
        var current = $(".Show");
        current.removeClass("Show");
        console.log(current.next());

        if ( current.next().length == 0 ) {
            clearInterval(my_interval);
        }

        current.next().addClass("Show");
    },3000 );
 });

jsfiddle link

Answer 2

对于重复操作，您可以使用 setInterval ：

jQuery(document).ready(function () {
     setInterval(function() {   
       jQuery('.Show').removeClass('Show').next().addClass('Show');
     }, 3000);
});

<强> Demo

如果您想在最后一次图像显示后显示第一张图像，请尝试以下代码：

jQuery(document).ready(function () {

   setInterval(function() {
      if(jQuery('.Show').next().length==0)
       {
           jQuery('.Show').removeClass('Show');
           $('li:first').addClass('Show');
       }
      else
      {
        jQuery('.Show').removeClass('Show').next().addClass('Show');
      }
   }, 3000);
});

<强> Demo

Answer 3

如果您希望在到达结尾时从第一张图片重新开始滑块效果，则应尝试以下操作：

$(document).ready(function () {
     setInterval(toggleNext, 3000);
 });

function toggleNext(){
    var current = $('li.Show');
    current.removeClass('Show');
    var next = current.next();
    if(!next.is('li')) 
        next = $('.cont ul li').first();
    next.addClass('Show');
}

一旦超时，如何更改下一个图像

3 个答案: