javascript - 无限轮播 - 使用 setInterval

Question

请检查此代码:

当我想删除 move 类时遇到问题

let lis = document.querySelectorAll('li')
let arr =  [];

for (let i = 0; i < lis.length; i++) {
	arr.push(lis[i]);
}

setInterval( function () {
		let splice = arr.splice(0,1);
    splice[0].classList.add('move');
    arr.push(splice[0]);
},3500)

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}

.slideshow {
   width: 350px;
   height: 200px;
   overflow: hidden;
   border: 3px solid #F2F2F2;
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 400%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
   transition: 2s;
}
.slideshow li {
   float: left;
   width: 25%;
   height: 200px;
   transition: .5s;
}
.move {
  margin-left: -25%;
  transition: .5s;
}

<div class="slideshow">
	<ul>
		<li class='red'></li>
		<li class='green'></li>
		<li class='yellow'></li>
		<li class='blue'></li>
	</ul>
</div>

非常感谢

编辑

https://jsfiddle.net/o00nu4w8/

用console.log，效果如我所愿，但是什么动画都出现

Answer 1

你可以尝试这样的事情。使用在每个步骤中递增的索引，当您到达最后一个步骤时，您将删除所有 move 类并重新开始。

let lis = document.querySelectorAll('li')
let c = 0;


setInterval(function() {
  if (c == lis.length -1) {
    c = 0;
    for (let i = 0; i < lis.length; i++)
      lis[i].classList.remove('move');
  } else {
    lis[c].classList.add('move');
    c++;
  }
}, 3500)

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.slideshow {
  width: 350px;
  height: 200px;
  overflow: hidden;
  border: 3px solid #F2F2F2;
}

.slideshow ul {
  /* 4 images donc 4 x 100% */
  width: 400%;
  height: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: 2s;
}

.slideshow li {
  float: left;
  width: 25%;
  height: 200px;
  transition: .5s;
}

.move {
  margin-left: -25%;
  transition: .5s;
}

<div class="slideshow">
  <ul>
    <li class='red'></li>
    <li class='green'></li>
    <li class='yellow'></li>
    <li class='blue'></li>
  </ul>
</div>