Image Carousel Interval Issue

Question

Hello #Peeps， 我在javascript中創建了一個應用程序，當我的狀態代碼（即1,2,3,4）在那個時候的圖像間隔更改不受影響時，我面臨一個問題。

在詳細說明： 我有2種狀態（即活動狀態和空閒狀態）的激活狀態的 代碼爲1和空閒狀態的代碼是2 在激活狀態下，有3個圖像中的每個圖像具有間隔1000（1秒），2000（2秒），3000（3秒）。 在空閒狀態下的相同圖像間隔。 我使用的圖片輪播的JavaScript

var slideIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 

    slideIndex++; 

    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
} 

但是當在那個時候我的狀態碼自動更新我的形象的具體時間間隔沒有工作，像超時採取不均勻間隔，並跳過一些圖片。

Answer 1

我認爲使用間隔更好，並且在功能之外設置。喜歡這個。

var slideIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 

 
    slideIndex++; 
 

 
    slideIndex > x.length && (slideIndex = 1); 
 
    x[slideIndex - 1].style.display = "block"; 
 
} 
 

 
setInterval(function() { 
 
    carousel() 
 
}, 2 * 1000); // Change image every 2 seconds

.mySlides { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 500px; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 140px; 
 
} 
 
.mySlides:nth-child(1) { 
 
    background: red; 
 
} 
 
.mySlides:nth-child(2) { 
 
    background: tomato; 
 
} 
 
.mySlides:nth-child(3) { 
 
    background: pink; 
 
} 
 
.mySlides:nth-child(4) { 
 
    background: green; 
 
}

<div class="mySlides">1</div> 
 
<div class="mySlides">2</div> 
 
<div class="mySlides">3</div> 
 
<div class="mySlides">4</div>

在本演示中，它保持在2秒的步伐。 希望這有助於。