jQuery - addClass ACTIVE-->设置超时-->循环

Question

我有5个具有相同类的元素，在页面加载时，第一个div是活动的：

<div id="div-1" class="cssClass active"></div>
<div id="div-2" class="cssClass"></div>
<div id="div-3" class="cssClass"></div>
<div id="div-4" class="cssClass"></div>
<div id="div-5" class="cssClass"></div>

如何在jQuery将活动类传递到第二个div之前添加超时，依此类推，到达最后一个div并从第一个div重新启动？以此类推。(我希望避免使用jQuery周期插件。几行代码中有没有更简单的东西？)

Answer 1

你可以像这样编写你自己的cycle插件：

(function($) {
    $.fn.cycle = function(timeout, cls) {
        var l = this.length,
            current = 0,
            prev = -1,
            elements = this;

        function next() {
            elements.eq(prev).removeClass(cls);
            // or just `elements.removeClass(cls);`
            elements.eq(current).addClass(cls);
            prev = current;
            current = (current + 1) % l; // modulo for wrap around
            setTimeout(next, timeout);
        }
        setTimeout(next, timeout);
        return this;
    };
}(jQuery));

并像这样使用它：

$('div').cycle(2000, 'active');

更新：忽略了第一个div已经是active。您可以通过添加以下内容来使插件检测已经处于活动状态的div：

if(this.filter('.' + cls).length > 0) {
    current = this.index(this.filter('.' + cls)[0]) + 1;
    prev = current - 1 ;
}

你也可以让函数接受一个从哪里开始的索引...

Answer 2

这个应该可以了。注释中的解释。

function moveClass() {
   if ($('.active:first').next()) {
      $('.active:first')
          .removeClass('active') //remove the current class
          .next() //move to the next
          .addClass('active'); // add the class to the next div
   } else {
      $('.active').removeClass('active');
      $('.cssClass:first').addClass('active'); //move to the first of the lot if there is no more next()
   }

}

$('.cssClass:first').addClass('active');
setInterval(moveClass, 5000);

Answer 3

下面是我的示例:)。

http://jsfiddle.net/8ByyN/