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

Question

我想从头做一个滑块，我知道有这个插件，但我想能够理解它背后的逻辑，这就是为什么我从头开始构建它，我已经获得了大部分零件除了我希望它在回到最后一张幻灯片后循环的部分之外。

这是我工作的一个笔到目前为止 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>