的jQuery遍歷裏旋轉，而無需使用.tabs

Question

目前，我有一個功能部分下面的HTML結構：

<ul> 
    <li> 
     <ul> 
      <li title="#tab1">Featured 1</li> 
      <li title="#tab2">Featured 2</li> 
      <li title="#tab3">Featured 3</li> 
     </ul> 
    </li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

的「特色」標籤有隱藏的內容對應的申報單，在默認情況下，第一個「精選1' 被裝入容器炫耀這個特色內容和2和3是display:none;

另一列表項（‘編號2’，‘項目3’等）通過jQuery負載被裝載（）上點擊進入功能容器，替換當前的功能容器，如果單擊「精選」選項卡，也會執行相同的操作。

我想要做的是旋轉前3個特色的標籤相關的內容準備好說每5秒，直到任何選項卡被點擊，然後它應該停止。

我正在使用.tabs與ui.js和ui-tabs.js做到這一點，但它增加了很多未經處理的js代碼，它可能更容易與自定義函數一起使用，但我有點難以忍受最好做一個基於計時器的循環。使用.tabs（）它基本上模擬點擊以顯示內容，但爲什麼不通過內容選項卡循環，同時使用addClass('clicked');設置相關的li類來顯示當前正在顯示的內容。

總之我需要的功能做以下僞代碼：

1. 在負載
2. 淡入<div id=tab1">和addClass（ 「點擊」）;到<li title="#tab1">
3. 淡出<div id=tab1"> 5秒後和removeClass <li title="#tab1">
4. 淡入<div id=tab2">和addClass（ 「點擊」）;到<li title="#tab2">
5. 淡出<div id=tab2"> 5秒後和removeClass <li title="#tab2">
6. 淡入<div id=tab3">和addClass（ 「點擊」）;到<li title="#tab3">
7. 淡出<div id=tab3"> 5秒後和removeClass <li title="#tab3">
8. 返回到步驟2

如果任何UL裏被點擊然後停止運行的功能。

Answer 1

也許是這樣的？

(function() { 
    var current = 1; 
    var total = 3; 

    var gotoNext = function() { 
     $('#tab' + current).fadeOut(); 

     if (current < total) { 
      current++; 
     } 
     else { 
      current = 1; 
     } 

     $('#tab' + current).fadeIn(); 
    }; 

    var interval = setInterval(gotoNext, 5000); 

    $('ul li').click(function() { 
     clearInterval(interval); 
    }); 
})();