Question

我用jquery构建了一个特色标签系统（4个标签）。它手动工作，但我想让它自动循环，例如。每5秒钟。我可以通过点击触发每个标签，但我不知道如何在第一个标签到达最后一个标签后返回到开头。

编码太长了，不能在这里过去，所以我给它做了一个jsfiddle链接：http://jsfiddle.net/ZSPX3/

我只是想遍历每个标签并逐一点击它们，然后再次从标签的开头开始，就像我想要无限幻灯片一样。但是我被困了......

我不想要任何插件，我想亲自学习如何做到这一点。

非常感谢

Answer 1

这里的关键部分是检查当前选项卡的索引，看看是否有超出它的选项卡。如果没有，请恢复到第一个选项卡。所以：

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，以考虑零索引）。如果前者低于后者，那么还有一些标签要去;如果没有，即他们是平等的，我们已经到了最后 - 回到起点。

希望这有帮助。

Answer 2

以下是您可以使用的一些代码：

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 。

javascript或jquery中的自动制表符切换

2 个答案: