jQuery幻灯片循环失败

Question

我一直在试图实现snook.ca的最简单的jQuery幻灯片，但适用于<ul>而不是一个简单的图像堆栈中的子元素。我已经成功地获得了通过必要的子元素旋转的幻灯片，但是当结束序列并返回到开头时，我已经用完了专有技术。

我想要序列返回到第一个<p>子元素并继续无限循环。

您可以在JS Bin上看到正在运行的幻灯片演示的演示。为jQuery代码的冗长道歉;我相信它可以被优化。

为子孙后代这里是HTML：

<header> 
    <nav> 
     <ul> 
     <li class="current"> 
      <h3>...</h3> 
      <p><img src="#"><span>...<a href="#">...</a></span></p> 
     </li> 
     <li> 
      <h3>...</h3> 
      <p><img src="#"><span>...<a href="#">...</a></span></p> 
     </li> 
     <li> 
      <h3>...</h3> 
      <p><img src="#"><span>...<a href="#">...</a></span></p> 
     </li> 
     <li> 
      <h3>...</h3> 
      <p><img src="#"><span>...<a href="#">...</a></span></p> 
     </li> 
     </ul> 
    </nav> 
    </header> 

这里是jQuery的：

$('header nav li').not('.current').children('p').hide(); 
    setInterval(function(){ 
    $('header nav li.current').children('p').hide() 
    .parent('li').removeClass() 
    .next('li').addClass('current') 
    .children('p').show() 
    .end(); 
    },3000); 

任何帮助你能给将不胜感激。干杯。

Answer 1

选择下一个li后，打破你的链接。如果没有下一个li，则结果集的length将为0。发生这种情况时，请循环回到开头。然后，完成你的设置。这里是对你的JSBin代码的修订版本：shows it working：

$('header nav li').not('.current').children('p').hide(); 
setInterval(function(){ 
    var $next = $('header nav li.current').children('p').hide() 
    .parent('li').removeClass() 
    .next('li'); 

    if(!$next.length) $next = $('header nav li:first'); 

    $next.addClass('current') 
    .children('p').show(); 
},3000);