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