结束时重新启动循环

潘卡杰·贾斯瓦尔

 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循环。

我在 3000 毫秒后更改每个元素的类，我想要的是当循环结束或到达最后一个元素时，它应该从头开始。我累了设置i = 0时i是数组的最后一个元素，但它并没有以某种方式工作。

提前致谢。

科基拉

您可以在 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)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-9

我来说两句

0 条评论

登录后参与评论

上一篇：数组中的随机项目，在 Javascript 中不重复元素

在进程启动时杀死explorer.exe，在进程结束时重新启动

并行执行两个线程并在第一个线程结束时重新启动它，而不是等待两个线程都完成

在Linux启动结束时启动命令

结束时重新启动循环

结束时重新启动循环

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

SQL Server中的非确定性数据类型

Swift 2.1-对单个单元格使用UITableView

如何避免每次重新编译所有文件？

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

应用发明者仅从列表中选择一个随机项一次

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

HttpClient中的角度变化检测

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何了解DFT结果

Camunda-根据分配的组过滤任务列表

错误：找不到存根。请确保已调用spring-cloud-contract：convert

为什么此后台线程中未处理的异常不会终止我的进程？

构建类似于Jarvis的本地语言应用程序

使用分隔符将成对相邻的数组元素相互连接

您如何通过 Nativescript 中的 Fetch 发出发布请求？

通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

使用 text() 獲取特定文本節點的 XPath