如何创建一个快速运行的自动画廊，然后在一张图像上停留更长时间

Question

所以我有一个来自 w3schools linked here 的自动图库。

我正在尝试找到一种方法来制作一个类似的画廊，除了它首先会以 0.3 秒的速度闪烁 5 张图片，然后在一张图片上停留 5 秒。然后重复这个过程。

我一直在试图弄清楚它，但我对 JavaScript 的了解还不够，甚至无法弄清楚如何处理它。任何提示或指导将不胜感激！

Answer 1

您可能希望为每个图像提供超时，或指定图像的哪个顺序具有不同的超时。以 w3school 为例，您可以这样做

1. 每张图片的供应超时

function showSlides() {
  var i;
  var timeout = [2000, 5000, 3000] // timeout for image1, image2, image3
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, timeout[slideIndex-1]); // get timeout based on current image order
}

1. 根据订单添加条件

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  
  //make second image last for 5 seconds
  if(slideIndex === 2){
    setTimeout(showSlides, 5000); // Change image at 5 seconds
  }else{
    setTimeout(showSlides, 2000); // Change image at 2 seconds
  }
  
}

请注意，它们可能是更好的方法，但我想告诉你，你只需要为setTimeout 提供你想要的正确时间。