Javascript 是否有一种自动循环引导选项卡的方法（类似于旋转木马）？

我希望引导选项卡在每个选项卡之间循环，有点像旋转木马，大约每10秒更改一次。我想这需要一些自定义javascript（但我有点新手）

（如果手动单击了某个选项卡，我也希望该循环停止，但这更像是一个“扩展目标”！）

以下是到目前为止我得到的信息：

我尝试过从类似问题中实施解决方案，例如：

$(function(){
var tabs = $('#myTab a');
    var counter = 0;
    window.setInterval(activateTab, 1000);
    function activateTab(){

       tabs.removeClass('active');
       var currentLink = tabs[counter];

       $('.tab-pane').removeClass('.active').hide();
       currentLink.addClass('active');
       $(currentLink.attr('href')).addClass('active').show();
       if(counter  < tabs.length)
         counter= counter + 1;
       else 
         counter = 0;
    }
});

$（函数（）{
变量表=$（“#我的表a”）；
var计数器=0；
设置时间间隔（activateTab，1000）；
函数activateTab（）{
tabs.removeClass（'active'）；
var currentLink=制表符[计数器]；
$（'.tab窗格'）.removeClass（'.active'）.hide（）；
currentLink.addClass（'active'）；
$（currentLink.attr（'href'））.addClass（'active'）.show（）；
如果（计数器

但我到目前为止运气不好

---

任何帮助都将不胜感激

我看到了你的小提琴，我用简单的迭代法想出了解决方案 jsiddle链接

---

我看到你的小提琴了，我用简单的迭代法想出了解决方案 jsiddle链接

---

非常感谢你，这真是太棒了！如果我要添加第二组选项卡，我将如何区分它们与第一组选项卡？目前，当第一组标签被更新时，它也会更新第二组——如果可能的话，我希望它们是独立的？在这里摆弄：有两种方法，要么通过父div id访问子级，要么将单个唯一id放到每个人的身上，然后在onload-ready函数中编写另一个js。非常感谢，这非常有效！如果我要添加第二组选项卡，我将如何区分它们与第一组选项卡？目前，当第一组标签被更新时，它也会更新第二组——如果可能的话，我希望它们是独立的？Fiddle here：有两种方法，一种是通过父div id访问子级，另一种是将单独的惟一id放到每个人身上，然后在onload ready函数中编写另一个js

    $(function(){
    var count = 0;
    setInterval(function(){
    if(count == 1){
      $("ul>li:nth-child(4)>a").removeClass("active");
      $("ul>li:nth-child(1)>a").addClass("active");
      $("#first-tab").addClass("active show in");
      $("#fourth-tab").removeClass("active show in");
    }
    else if(count == 2){
      $("ul>li:nth-child(2)>a").addClass("active");
      $("ul>li:nth-child(1)>a").removeClass("active");
      $("#second-tab").addClass("active show in");
      $("#first-tab").removeClass("active show in");
    }
    else if(count == 3){
      $("ul>li:nth-child(3)>a").addClass("active");
      $("ul>li:nth-child(2)>a").removeClass("active");
      $("#third-tab").addClass("active show in");
      $("#second-tab").removeClass("active show in");
    }
    else if(count == 4){
      $("ul>li:nth-child(4)>a").addClass("active");
      $("ul>li:nth-child(3)>a").removeClass("active");
      $("#fourth-tab").addClass("active show in");
      $("#third-tab").removeClass("active show in");
    }
    if (count == 4){count=1;}else{count+=1}
  }, 10000);
});