Question

我试图在我的coursel中有两个单独的超时时间（因此2张幻灯片比其他幻灯片更快）。我的所有图像都在7秒钟，但我想要我的＆＃34; brands1slide＆＃34;和＆＃34; brands2slide＆＃34;是3.5秒。

＆＃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++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 7000);
}

＆＃13;

<div class="SlidesDiv" style="max-width:1024px">
  <img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
  <img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
  <img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
  <img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>

＆＃13;

Answer 1

一种方法是让一个时间数组指定每张幻灯片的超时时间：

var slideTimes = [7000, 3500, 3500, 7000];

然后您可以使用它为每张幻灯片选择一个好的超时：

setTimeout(carousel, slideTimes[slideIndex - 1]);

段：

var slideTimes = [3500, 3500, 7000, 7000];
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, slideTimes[slideIndex - 1]);
}

<div class="SlidesDiv" style="max-width:1024px">
  <img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
  <img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
  <img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
  <img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>

如何设置两个超时？

1 个答案: