Question

您好#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

我认为使用间隔并将其设置在函数外部会更好。像这样。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在这个演示中，它保持2秒的速度。希望这会有所帮助。

图像轮播间隔问题

1 个答案: