Jquery 时间间隔集CSS类

我有一个关于使用JQuery切换类的问题。在我的例子中，列表中有4个超链接。我想要的是：

在初始状态下，我的第一个超链接得到了类：“活动”：

但是在一段时间间隔之后，我希望将类“active”从hyperlink1中删除并添加到link2。超级链接3和4也采用相同的过程

因此，始终有一个超链接具有黑色背景颜色：

另一个要求是，每当它到达最后一个超链接（链接4）时，它都应该以链接1重新开始

我该怎么做？这就是我到目前为止所做的：

HTML

<ul class="tab-slide">
    <li><a href="#">Link 1</a></li>
    <li><a  href="#">Link 2</a></li>
    <li><a  href="#">Link 3</a></li>
    <li><a  href="#">Link 4</a></li>
</ul>

JavaScript代码：

$(function() {
    $('.tab-slide li:nth-of-type(1)').addClass('active');

    var i = 1;
    var amount = $('.tab-slide li').length;

    setInterval(function() {   
        if(i > amount) {
            i = 1;
        }

        $('.tab-slide li').removeClass('active');
        $('.tab-slide li:nth-of-type('+i+')').addClass('active');

        i++;
    }, 1000);
});

---

以下是其他解决方法：

$(function() {    
    var i = 0;
    var $target = $('.tab-slide li');

    setInterval(function(){
        $target.removeClass('active');
        $target.eq(i).addClass('active');
        if( i == $target.length - 1 ) i = 0;
        else i++;
    }, 1000);
});

试试看

$(function() {    
    $('.tab-slide li').first().addClass('active');
    var i = 1;
    setInterval(function(index) { 

         $('.tab-slide li').removeClass('active');
         $('.tab-slide li').eq(i).addClass('active');
         i++;
        if(i === $('.tab-slide li').length){
            i = 0;
        }


    }, 1000);
});

---

您可以尝试以下方法：

$(function() {    
   var list = $('.tab-slide li');
   var i = 0;

   setInterval(function() { 
      $('.tab-slide li.active').removeClass('active');
      $(list[i]).addClass('active');
      i = i < list.length - 1 ? (i+1) : 0;
   }, 1000);
});

$（函数（）{
变量列表=$（'.tab幻灯片li'）；
var i=0；
setInterval（函数（）{
$（'.tab幻灯片li.active'）.removeClass（'active'）；
$（列表[i]）.addClass（“活动”）；
i=i

您的JSFIDLE示例从未重新突出显示第一项-可能需要快速修复；-）这正是我想要的。但我还有一个问题。每当循环结束时，它就开始为超链接2设置“活动”类。但是如果我想让循环以超链接1重新开始呢？修复它，给我一分钟：）是的！谢谢！：）@KrzysztofTrzosI想，但我有5分钟的时间来接受答案；）@第3993分部

$(function() {    
   var list = $('.tab-slide li');
   var i = 0;

   setInterval(function() { 
      $('.tab-slide li.active').removeClass('active');
      $(list[i]).addClass('active');
      i = i < list.length - 1 ? (i+1) : 0;
   }, 1000);
});