Question

我试图在短暂的延迟（可能10秒左右）之后在div上移动类名。

我希望下面的3个类在到达最后一个时通过div和循环。

例如：

<div class="wrapper">
 <div></div>
 <div></div>
 <div class="previous-one"></div>
 <div class="in-focus"></div>
 <div class="next-one"></div>
 <div></div>
 <div></div>
</div>

转向：

<div class="wrapper">
 <div></div>
 <div></div>
 <div></div>
 <div class="previous-one"></div>
 <div class="in-focus"></div>
 <div class="next-one"></div>
 <div></div>
</div>

我希望这是有道理的，这是我在这里的第一篇文章，所以没有什么比从一个复杂的开始。

感谢任何回复。

Answer 1

一步一步地想一想。

查找包装器中所有div的列表。
从相应的元素中删除“previous-one”类。
将“in-focus”替换为“previous-one”。
将“next-one”替换为“in-focus”。
检查对焦后是否有元素。
- 如果有，请将其设为“下一个”。
- 否则，将列表的第一个div设为“next-one”。
冲洗并重复。

http://jsfiddle.net/thePivottt/9m63rouu/

function scrollFocus() {
    var elements = $(".wrapper div");
    var nextOne = elements.filter(".next-one");
    var inFocus = elements.filter(".in-focus");

    elements.filter(".previous-one").removeClass("previous-one");
    inFocus.removeClass("in-focus");
    inFocus.addClass("previous-one");
    nextOne.removeClass("next-one");
    nextOne.addClass("in-focus");

    var newNext = nextOne.next("div");
    if (newNext.length == 0) newNext = elements.first();
    newNext.addClass("next-one");
}

setInterval(scrollFocus, 1000);

Answer 2

这是我的解决方案。通过更改下一个div的类来推进每个div，然后删除当前div的类。如果它是包装器中的最后一个div，则将该类移动到第一个div。这是小提琴https://jsfiddle.net/cyjm5toa/

不是最优雅的代码，但效果很好。

setInterval(function(){

    if($('.wrapper div').last()[0]==$('.next-one')[0]){
        $('.next-one').removeClass('next-one');
        $('.wrapper div').first().addClass('next-one');
    }
    else{
        $('.next-one').removeClass('next-one').next().addClass('next-one');
    }

    if($('.wrapper div').last()[0]==$('.previous-one')[0]){
        $('.previous-one').removeClass('previous-one');
        $('.wrapper div').first().addClass('previous-one');
    }
    else{
        $('.previous-one').removeClass('previous-one').next().addClass('previous-one');
    }

    if($('.wrapper div').last()[0]==$('.in-focus')[0]){
        $('.in-focus').removeClass('in-focus');
        $('.wrapper div').first().addClass('in-focus');
    }
    else{
        $('.in-focus').removeClass('in-focus').next().addClass('in-focus');
    }

},1000);

将类名从div移动到div

2 个答案: