结束时重新启动循环

Question

let options = document.getElementsByClassName("option");
console.log(options);
var i = 1;  
for (let i = 0; i < options.length; i++){ 
options[i].classList.remove("active")
setTimeout(function () {   
if(i!=0){
console.log(options[i-1].classList.remove("active"))
}
console.log(options[i].classList.add("active"))

}, i*3000)

}
function changeItem(item){
item.classList.add("active")
}

body {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
overflow: hidden;
height: 100vh;
font-family: 'Roboto', sans-serif;
}
body .credit {
position: absolute;
bottom: 20px;
left: 20px;
color: #000;
}
body .options {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: stretch;
align-items: stretch;
overflow: hidden;
min-width: 600px;
max-width: 900px;
width: calc(100% - 100px);
height: 400px;
}
@media screen and (max-width: 718px) {
body .options {
min-width: 520px;
}
body .options .option:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 638px) {
body .options {
min-width: 440px;
}
body .options .option:nth-child(4) {
display: none;
}
}
@media screen and (max-width: 558px) {
body .options {
min-width: 360px;
}
body .options .option:nth-child(3) {
display: none;
}
}
@media screen and (max-width: 478px) {
body .options {
min-width: 280px;
}
body .options .option:nth-child(2) {
display: none;
}
}
body .options .option {
position: relative;
overflow: hidden;
min-width: 60px;
margin: 10px;
background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
background-size: auto 120%;
background-position: center;
cursor: pointer;
-webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
--defaultBackground:#ED5565;
}
body .options .option:nth-child(2) {
--defaultBackground:#FC6E51;
}
body .options .option:nth-child(3) {
--defaultBackground:#FFCE54;
}
body .options .option:nth-child(4) {
--defaultBackground:#2ECC71;
}
body .options .option:nth-child(5) {
--defaultBackground:#5D9CEC;
}
body .options .option:nth-child(6) {
--defaultBackground:#AC92EC;
}
body .options .option.active {
-webkit-box-flex: 10000;
flex-grow: 10000;
-webkit-transform: scale(1);
transform: scale(1);
max-width: 600px;
margin: 0px;
border-radius: 40px;
background-size: auto 100%;
/*&:active {
transform:scale(0.9);
}*/
}
body .options .option.active .shadow {
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
bottom: 20px;
left: 20px;
}
body .options .option.active .label .info > div {
left: 0px;
opacity: 1;
}
body .options .option:not(.active) {
-webkit-box-flex: 1;
flex-grow: 1;
border-radius: 30px;
}
body .options .option:not(.active) .shadow {
bottom: -40px;
box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
bottom: 10px;
left: 10px;
}
body .options .option:not(.active) .label .info > div {
left: 20px;
opacity: 0;
}
body .options .option .shadow {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 120px;
-webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
display: -webkit-box;
display: flex;
position: absolute;
right: 0px;
height: 40px;
-webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
min-width: 40px;
max-width: 40px;
height: 40px;
border-radius: 100%;
background-color: white;
color: var(--defaultBackground);
}
body .options .option .label .info {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
margin-left: 10px;
color: white;
white-space: pre;
}
body .options .option .label .info > div {
position: relative;
-webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
font-weight: bold;
font-size: 1.2rem;
}
body .options .option .label .info .sub {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="options">
<div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-walking"></i>
</div>
<div class="info">
<div class="main">Blonkisoaz</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-snowflake"></i>
</div>
<div class="info">
<div class="main">Oretemauw</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tree"></i>
</div>
<div class="info">
<div class="main">Iteresuselle</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-tint"></i>
</div>
<div class="info">
<div class="main">Idiefe</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
<div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-sun"></i>
</div>
<div class="info">
<div class="main">Inatethi</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
</div>
<a href="http://victorofvalencia-blog.tumblr.com" target="_blank" class="credit">Photos from Victor of Valencia on tumblr</a>
<script src="index.js"></script>
</body>
</html>

我从 codepen 中获取了这个动画，最初它只在点击时执行，但我想在 3 秒后执行它。所以我添加了一个 for 循环。

我在 3000ms 后更改每个元素的类，我想要的是当循环结束时或到达最后一个元素时，它应该从头开始重新启动。当i数组的最后一个元素时，我厌倦了设置i = 0，但它不知何故不起作用。

提前谢谢。

Answer 1

您可以在 for 循环中使用 setInterval 而不是 setTimeOut。

let options = document.getElementsByClassName("option");
var i = 1;
setInterval(function () {
if (i === 5) {
options[i - 1].classList.remove("active")
i = 0
}
if (i != 0) {
if (i === 5) {
options[i].classList.remove("active")
}
options[i - 1].classList.remove("active")
}
options[i].classList.add("active")
i++
}, 3000)

Answer 2

你真的不需要循环：

var i = 0, n = options.length;
function loop() {
window.setTimeout(function() {
options[i].classList.remove("active");
i++;
if (i == n) {
i = 0;
}
options[i].classList.add("active"));
loop();
}, 3000);
}
if (n > 0) {
// if there is at least one element then activate the first one
options[i].classList.add("active"); 
if (n > 1) {
// if there are several elements run loop
loop();
}
}