帶有 setInterval function 的自動圖像 slider 不起作用

Question

slider 的第三張照片沒有出現在幻燈片上。 一段時間后幻燈片完全失敗，照片正在迅速變化。 幻燈片失敗后，當照片快速變化時，有時會出現第三張照片。 但我不明白為什么它一開始沒有出現，為什么幻燈片越來越快。 我該如何解決這個問題？

 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

你的問題是每次你運行 function 時都會設置一個新的間隔，所以你最終會同時運行一堆。 您只需設置一次，然后每隔兩秒適當地調用一次 function。 我修改了你的例子：

 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>