[目前，我必须重建一些页面以用普通JavaScript替换jQuery。就我而言，我的div包裹着一些图片。第一个图像具有css-modifier（-active），在JavaScript中，我需要一个循环，以删除该修饰符并将其提供给下一个图像。最后，修改器应再次放置在第一张图像上。此功能也应该每秒运行一次。
html看起来像这样：
(function () {
var container = document.getElementsByClassName('m-weatherMap__image');
container = Array.from(container);
timedLoop();
function timedLoop () {
var i = 0;
setTimeout(function () {
i++;
timedLoop();
if (i < container.length) {
if (!container[i].classList.contains('-active')) {
setTimeout(fadeout, 300);
function fadeout () {
container[i - 1].classList.remove('-active');
container[i - 1].style.opacity = '0';
}
container[i].classList.add('-active');
}
}
}, 1000);
}
})();<div class="m-weatherMap">
<img class="m-weatherMap__image -active" src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
</div>现在，我需要一个遍历数组并检查元素是否具有修饰符的循环。如果是这样，它将删除它，并将其提供给下一个元素。此刻，该类将被添加到第二个图像中，但不会再添加（昨天它一直工作到数组的末尾，不确定我所做的更改），但是它到达了数组的末尾并在那里停止了。
有人有主意吗？
我认为这不是一个糟糕的解决方案：
(function () {
var container = document.getElementsByClassName('m-weatherMap__image');
var counter = 0
container = Array.from(container);
setInterval(function() {
if (counter === container.length - 1) {
container[counter].classList.remove('-active');
container[0].classList.add('-active');
counter = 0;
return;
}
if (counter <= container.length - 2) {
container[counter].classList.remove('-active');
container[counter+1].classList.add('-active');
}
counter++;
}, 1000);
})();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="m-weatherMap">
<img class="m-weatherMap__image -active" src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
<img class="m-weatherMap__image " src="bla">
</div>
</body>
</html>