在javascript或jQuery中自動切換標籤頁

我使用jquery構建了一個精選標籤系統（4個標籤頁）。它可以手動工作，但我想讓它自動循環，例如。每5秒鐘一次。我甚至可以用點擊觸發每個選項卡，但是我不知道如何從第一個選項卡返回到最後一個選項卡的開始位置。在javascript或jQuery中自動切換標籤頁

編碼太長，過去這裏，所以我已經做了的jsfiddle鏈接到它：http://jsfiddle.net/ZSPX3/

我只是想通過每個選項卡迭代並單擊它們每一個，然後從選項卡中的重新開始，如在我想要一個無限的幻燈片。但我卡...

我不想要任何插件，我想學習如何用我自己的手做這個，請。

非常感謝

來源

2012-04-02 Shaoz

這裏的關鍵部分是檢查當前打開的選項卡的索引，並查看是否有超出它的任何選項卡。如果不是，則返回到第一個選項卡。所以：

HTML

<ul id='tabs'> 
    <li class='on'>tab 1</li> 
    <li>tab 2</li> 
    <li>tab 3</li> 
    <li>tab 4</li> 
    <li>tab 5</li> 
</ul>

CSS

#tabs { list-style: none; margin: 0; padding: 0; } 
#tabs li { float: left; background: #ddd; padding: 6px; } 
#tabs li.on { background: #f90; color: #fff; }

JS（jQuery的假設）

$(function() { 

    //cache a reference to the tabs 
    var tabs = $('#tabs li'); 

    //on click to tab, turn it on, and turn previously-on tab off 
    tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); }); 

    //auto-rotate every 5 seconds 
    setInterval(function() { 

      //get currently-on tab 
     var onTab = tabs.filter('.on'); 

      //click either next tab, if exists, else first one 
     var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first(); 
     nextTab.click(); 
    }, 5000); 
});

我們比較當前的標籤與（零索引）指數標籤的總數（-1，以說明零索引）。如果前者低於後者，還有一些標籤要去;如果不是，即他們是平等的，我們已經達到了最後 - 回到開始。

希望這會有所幫助。

來源

2012-04-02 17:42:38

感謝您的回答@Andrew Croxall，它確實有幫助...我已經整合了它，它的作品也找到了。 – Shaoz 2012-04-04 09:55:22

下面是一些代碼，你可以使用：

的jQuery：

setInterval(function() { 
    var current = parseInt($('li.selected a').data('links-to').split('_')[1],10); 
    var idx=current-1; 
    var max = $('.carouselLinks li a').length; 
    idx = (current<max) ? (idx+1):0; 
    $('a:eq('+idx+')').trigger('click'); 
}, 3000);

更新jsFiddle example。

來源

2012-04-02 17:37:31 j08691

感謝您的幫助@ j08691 ... – Shaoz 2012-04-04 09:56:20

在javascript或jQuery中自動切換標籤頁

回答

相關問題