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 Cycle插件。有几行更简单吗？）

Answer 1

您可以编写自己的循环插件，如下所示：

(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');

DEMO

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

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

DEMO

您还可以让函数接受索引从哪里开始......

Answer 2

function changeClass() {
    if ($(".active").next(".cssClass").length > 0) {
        $(".active").removeClass("active").next(".cssClass").addClass("active");
    }
    else {
        $(".active").removeClass("active");
        $(".cssClass").first().addClass("active");
    }
    setTimeout(changeClass, 1000); // 1000ms = 1sec
}

然后只需拨打changeClass()一次即可让球滚动。

编辑：更新了应该实际工作的内容。（再次）

Answer 3

这应该这样做。评论中的解释。

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 4

这是我的例子:)。

http://jsfiddle.net/8ByyN/

Answer 5

首先尝试。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

</script>

<style type="text/css">
    .active
    {
        font-weight:bold;    
    }
</style>




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

<button onclick="int=window.clearInterval(int)">Stop</button>


<script type="text/javascript">

    function toggleActive() {

        if ($(".cssClass:last").hasClass("active")) {
            console.warn("last element reached");
            $(".cssClass:last").toggleClass("active");
            $(".cssClass:first").toggleClass("active");
        }
        else {
            $(".active").first().toggleClass("active").next().addClass("active");
        }

    }
     var int;
    $(function () {

        int= self.setInterval("toggleActive()", 1000);

    });
</script>

希望这有帮助。

jQuery - addClass ACTIVE - ＆gt;设置超时 - ＆gt;周期

5 个答案: