是否可以使用 setTimeout 设置循环动画？答案

【问题标题】：Is it possible to set a looping animation with setTimeout?是否可以使用 setTimeout 设置循环动画？
【发布时间】：2017-04-26 17:25:02
【问题描述】：

我正在尝试从头开始制作一个滑块，我知道有插件可以解决这个问题，但我希望能够理解它背后的逻辑，这就是我从头开始构建它的原因，我已经掌握了大部分部分向下，除了我希望它在到达最后一张幻灯片后循环的部分。

这是我迄今为止的作品 https://codepen.io/alexyap/pen/zwoRMy

$(document).ready(function(){

function slide() {
setTimeout(function(){
  $("#container").addClass("slide-left1")
}, 3000);

setTimeout(function(){
  $("#container").addClass("slide-left2")
}, 9000);

}

slide();

我想要做的是用我的 setTimeout 函数创建一个循环，因为我希望每张幻灯片在页面加载后大约几秒钟之前不做任何事情，然后在相应的幻灯片上再次暂停几秒钟，所以为了让访问者有时间阅读幻灯片上的任何内容，提前感谢任何帮助

【问题讨论】：

使用setInterval()进行循环。

标签： javascript jquery css css-transitions

【解决方案1】：

试试这个：

$(document).ready(function(){
  
  function slide() {
    setTimeout(function(){
      $("#container").removeClass("slide-left3");
      $("#container").addClass("slide-left1");
    }, 2000);

    setTimeout(function(){
      $("#container").removeClass("slide-left1");
      $("#container").addClass("slide-left2");
    }, 4000);
    
    setTimeout(function(){
     $("#container").removeClass("slide-left2");
     $("#container").addClass("slide-left3");
      slide();
   }, 6000);
  }
  
  slide();        
})

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

#container {
  width: 300vw;
  background: #000;
  height: 100vh;
  position: relative;
  left: 0;
  transition: .9s ease;
}

#slide1 {
  background: red;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  position: absolute;
  transition: .9s ease;
}

#slide2 {
  background: yellow;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 100vw;
  top: 0;
  transition: .9s ease;
}

#slide3 {
  background: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 200vw;
  top: 0;
  transition: .9s ease;
}

.slide-left1 {
  left: 0 !important;
}

.slide-left2 {
  left: -100% !important;
}

.slide-left3 {
  left: -200% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="slide1">
  </div>

  <div id="slide2">
  </div>

  <div id="slide3">
  </div>
</div>

【讨论】：