javascript – 自动更改Twitter Bootstrap标签

我正在寻找一个按时间顺序更改Twitter Bootstrap选项卡.我正在使用它们像旋转木马.我希望选项卡每10秒钟更换一次.

这是一个例子：http://library.buffalo.edu

点击新闻,看看我的意思.任何帮助将不胜感激.

解决方法

像这样的事情会创造一个永无止境的旋转木马循环;它将循环遍历所有选项卡,并在其到达最后一个(并将其替换为适当的选择器以将其替换为标签标记之后,将其替换为第一个)返回到第一个选项卡)：

var tabCarousel = setInterval(function() {
    var tabs = $('#yourTabWrapper .nav-tabs > li'),active = tabs.filter('.active'),next = active.next('li'),toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

    toClick.trigger('click');
},3000);

我们正在做的是找到活动选项卡,然后在列表中的下一个选项卡上触发点击事件.如果没有下一个选项卡,我们会在第一个选项卡上触发点击事件.请注意,事件实际上是在a上而不是li触发的.

现在,如果要添加逻辑来暂停或重置用户悬停或手动点击选项卡的时间间隔,则需要单独添加,并且您将使用clearInterval(tabCarousel)来停止循环.

这是一个基本的演示：

— jsFiddle DEMO —

原文地址：https://www.jb51.cc/js/153967.html