超时后如何更改下一个图像

How to change next image once it is time out

本文关键字：下一个 图像 何更改 超时      更新时间：2023-09-26
<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);
});

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

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

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

演示

如果您想在最后一个图像显示

之后显示第一个图像，请尝试以下代码：

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);
});

演示

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

如果您希望滑块效果在到达末尾时从第一个图像重新启动，则应尝试以下操作：

$(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');
}
相关文章：