javascript - 是否可以使用 setTimeout 设置循环动画？

Question

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

这是我迄今为止的作品 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 函数做一个循环，因为我希望每张幻灯片在页面加载后大约几秒钟内不做任何事情，然后在相应的幻灯片上再次暂停几秒钟，所以为了让访问者有时间阅读幻灯片上的任何内容，感谢任何帮助提前致谢

Answer 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>