画像カルーセル間隔の問題

Question

こんにちは#Peeps、 JavaScriptが1つのアプリケーションを作成していますが、そのときに状態コード（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秒のペースで続けます。 これが役立つことを願っています。