图像轮播间隔问题

Question

您好#Peeps，我正在用JavaScript创建一个应用程序，当时我的状态代码（即1,2,3,4）更改了，而图像间隔未受影响，则我遇到了一个问题。

详细信息：我有2个状态（即活动状态和空闲状态），活动状态的代码为1，空闲状态的代码为2。在活动状态下，有3个图像，每个图像的间隔为1000（1秒），2000 （2sec），3000（3 sec）。 在空闲状态下相同的图像间隔。 我正在使用图像轮播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秒的速度。 希望这可以帮助。