是否可以使用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>