我将如何为幻灯片添加自动化？

Question

I built a JS slideshow with clickable indicators. I would like for my slideshow to play automatically, while maintaining the functionality of the indicator buttons.

In the code example below, I attempted to add a setTimeout() method to change the image every 2000ms, but it seems to not be working. What would be the best approach to change the JS so I have some automation? I also attempted to use the setInterval method with no luck. I will provide the code below:

Thank you in advance for the help/tips/and advice

 var editorialSlideIndex = 1; showEditorialSlides(editorialSlideIndex); //Next/previous controls function plusSlides(n) { showEditorialSlides(editorialSlideIndex += n); } //Thumbnail image controls function currentSlide(n) { showEditorialSlides(editorialSlideIndex = n); } function showEditorialSlides(n) { var i; var slides = document.getElementsByClassName("editorial-slideshow"); var slideDotInd = document.getElementsByClassName("slideDotInd"); if (n > slides.length) { editorialSlideIndex = 1 } if (n < 1) { editorialSlideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < slideDotInd.length; i++) { slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", ""); } slides[editorialSlideIndex - 1].style.display = "block"; slideDotInd[editorialSlideIndex - 1].className += " active-slider"; setTimeout(showEditorialSlides, 2000); // Change image every 2 seconds }

 /*Slideshow Container */.editorial-slideshow-container { padding-top: 15px; position: relative; margin: auto; } /*Default Hide Images*/.editorial-slideshow { display: none; } /*Next and previous buttons*/.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -34px; padding: 10px; color: white; font-weight: bold; font-size: 34px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0, 128, 115, .5); } /* Position "next button" */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, background color */.prev:hover, .next:hover { background-color: rgba(0, 128, 115, .8); } /* Caption text.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } Number text (1/3 etc).numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 15; } */ /* The slideslideDotInd/bullets/indicators */.slideDotInd { cursor: pointer; height: 15px; width: 15px; margin: 15px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active-slider, .slideDotInd:hover { background-color: #717171; } /* Fading animation */.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: .25s; } @-webkit-keyframes fade { from { opacity: .8 } to { opacity: 1 } } @keyframes fade { from { opacity: .8 } to { opacity: 1 } } @media only screen and (max-width: 425px) { #CGConainer.banner-title H1 { line-height: 50px; } } @media only screen and (min-width: 768px) {.editorial-slideshow-container { width: 75%; /*Max width is 576px*/ } } @media only screen and (min-width: 1024px) {.editorial-slideshow-container { width: 50%; } }

 <div class="editorial-slideshow-container"> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-1.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-2.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-3.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-4a.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-5a.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-6.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-7.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-8.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-9.jpg" style="width:100%"> </div> <div class="editorial-slideshow fade"> <img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-10.jpg" style="width:100%"> </div> <p class="prev" onclick="plusSlides(-1)">&lsaquo;</p> <p class="next" onclick="plusSlides(1)">&rsaquo;</p> </div> <div style="text-align:center"> <span class="slideDotInd" onclick="currentSlide(1)"></span> <span class="slideDotInd" onclick="currentSlide(2)"></span> <span class="slideDotInd" onclick="currentSlide(3)"></span> <span class="slideDotInd" onclick="currentSlide(4)"></span> <span class="slideDotInd" onclick="currentSlide(5)"></span> <span class="slideDotInd" onclick="currentSlide(6)"></span> <span class="slideDotInd" onclick="currentSlide(7)"></span> <span class="slideDotInd" onclick="currentSlide(8)"></span> <span class="slideDotInd" onclick="currentSlide(9)"></span> <span class="slideDotInd" onclick="currentSlide(10)"></span> </div>

Answer 1

It's such a small change.

The way you called setTimeout is wrong.

function showEditorialSlides(n) {
  var i;
  var slides = document.getElementsByClassName("editorial-slideshow");
  var slideDotInd = document.getElementsByClassName("slideDotInd");
  if (n > slides.length) {
    editorialSlideIndex = 1
  }
  if (n < 1) {
    editorialSlideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < slideDotInd.length; i++) {
    slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
  }
  slides[editorialSlideIndex - 1].style.display = "block";
  slideDotInd[editorialSlideIndex - 1].className += " active-slider";
  setTimeout(() => showEditorialSlides(editorialSlideIndex = (n+1)), 2000); // Change image every 2 seconds
}

And that was the reason your function was being called incorrectly. EDIT: I forgot to mention the reason. There was no way JavaScript knew what parameters you were passing to the function when you're trying to recurse.

You can try it out in the fiddle