javascript - 具有 setInterval 功能的自动图像 slider 不起作用

Question

slider 的第三张照片没有出现在幻灯片上。一段时间后幻灯片完全失效，照片正在迅速变化。滑动失败后，当照片快速变化时，有时会出现第三张照片。但是我无法弄清楚为什么它一开始没有出现以及为什么 slide 越来越快。我该如何解决这个问题？

let sliderImages = document.querySelectorAll(".slide");
current = 0;

function reset() {
  for(let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

function startSlide() {
  reset();
  if(current == sliderImages.length) {
    current = 0;
  }  
  sliderImages[current].style.display = "block";
  current++;
  setInterval(startSlide, 2000);
}

startSlide();

body, #slider, .wrap, .slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image:   url("https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}

.slide2 {
  background-image: url("https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}

.slide3 {
  background-image: url("https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}

<div class="wrap">
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
      
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
      
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
      
      </div>
    </div>
  </div>
</div>

Answer 1

你的问题是每次你运行这个函数时都会设置一个新的间隔，所以你最终会同时运行一堆函数。你只需要设置一次，然后该函数将适本地每两秒调用一次。我修改了你的例子:

let sliderImages = document.querySelectorAll(".slide");
current = 0;

function reset() {
  for(let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

function startSlide() {
  reset();
  if(current == sliderImages.length) {
    current = 0;
  }  
  sliderImages[current].style.display = "block";
  current++;
}

setInterval(startSlide, 2000);

body, #slider, .wrap, .slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image:   url("https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}

.slide2 {
  background-image: url("https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}

.slide3 {
  background-image: url("https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}

<div class="wrap">
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
      
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
      
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
      
      </div>
    </div>
  </div>
</div>