Question

我有这个HTML：

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

现在我要添加第一个li课程current和第二个课程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);
});

演示：Fiddle

Answer 2

这是js代码。

var index = 0;

function 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)

}

祝你好运

jQuery通过元素旋转类

2 个答案: