javascript - 将类名从 div 移动到 div

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

您应该尝试这个 jquery 解决方案:

var colors = ['blue', 'green', 'red'],
    timer = 1000;

setInterval(function() {
  for(var c in colors) {
    var $current = $('.' + colors[c]),
        $next = $current.next('li');
    if($next.length == 0) {
      $next = $('ul li:first-child');
    }
    $current.removeClass(colors[c]);
    $next.addClass(colors[c]);
  }
}, timer);

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>lorem</li>
  <li class="blue">ipsum</li>
  <li class="green">dolor</li>
  <li class="red">hello</li>
  <li>world</li>
  <li>again</li>
</ul>