javascript - jQuery通过元素旋转类

Question

我有这个 HTML：

<ul class="box">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    ...
</ul>

现在我想添加 first liclasscurrent和 second class next。然后在等 1 秒后将课程“向下”移动，因此第二个将有课程current，第三个将有课程next。1 秒后再次current向第三个孩子和next第一个孩子上课。等等……永远。但是我该怎么做呢？这样做有什么通用的解决方案吗？

Answer 1

尝试

jQuery(function () {
    var $lis = $('.box li'),
        $cur = $lis.first().addClass('current'),
        $next = $cur.next().addClass('next');
    setInterval(function () {
        $cur.removeClass('current');
        $cur = $next.removeClass('next').addClass('current');

        $next = $cur.next();
        if (!$next.length) {
            $next = $lis.first();
        }
        $next.addClass('next');
    }, 1000);
});

演示：小提琴

Answer 2

这是 js 代码。

var index = 0;

函数 InfinitiveSwitching() { var items = $(".box li");

var previousIndex = index - 1;
if (0 > previousIndex) {
    previousIndex = $(items).length - 1;
}

var previousImage = $(items).get(previousIndex);
$(previousImage).removeClass('current');

var currentImage = $(items).get(index);
$(currentImage).removeClass('second');
$(currentImage).addClass('current');

index++;
if (index >= $(items).length) {
    index = 0;
}
var secondImage = $(items).get(index);
$(secondImage).addClass('second');
window.setTimeout(function () { InfinitiveSwitching() }, 1000)

}

祝你好运