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秒的步伐。 希望这有助于。