自动播放在一页上有多个幻灯片的 javascript 幻灯片不起作用

Question

I'm trying to make a simple javascript slideshow, that will use prev and next buttons to cycle through, and autoplay. Plus, require to have multiple slideshows on one page.

Can't get the autoplay on load to work? Am I missing something?

The code I've been using works with multiple on one page, and prev and next buttons work. However the auto play doesn't work on the window load, but does start to work when you click one of the previous and next buttons.

Thanks.

var slideIndex = [1,1,1,1,1]
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);

var myTimer;

window.addEventListener("load",function() {
    showSlides(slideIndex[no], no);
    myTimer = setInterval(function(){plusSlides(1, no)}, 4000);
})

function plusSlides(n, no){
  clearInterval(myTimer);
  if (n < 0){
    showSlides(slideIndex[no] -= 1, no);
  } else {
   showSlides(slideIndex[no] += 1, no); 
  }
  if (n === -1){
    myTimer = setInterval(function(){plusSlides(n + 2, no)}, 4000);
  } else {
    myTimer = setInterval(function(){plusSlides(n + 1, no)}, 4000);
  }
}

function currentSlide(n, no){
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(n + 1, no)}, 4000);
  showSlides(slideIndex[no] = n, no);
}

function showSlides(n, no){
  var i;
  var slides = document.getElementsByClassName(slideId[no]);
  var dotname = "dot" + no; 
  var dots = document.getElementsByName(dotname);
  if (n > slides.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active_slide", "");
  }
  slides[slideIndex[no]-1].style.display = "block";
  dots[slideIndex[no]-1].className += " active_slide";
}

Answer 1

I suggest you don't reset your interval.

If you have an array like so:

const slides = [
  'slideOne', 'slideTwo',
  'slideThree', 'slideFour',
  'slideFive', 'slideSix'

];

you can just do:

let autoSliderInterval;
let currentSlideIndex = 0;

function _autoSlide() {
  // Increase Slide index
  currentSlideIndex++;
  // If slides are at the end begin from the start
  if(currentSlideIndex >= slides.length) currentSlideIndex = 0;
  // Display current slide
  displaySlide(currentSlideIndex);
}

Then if you want to acutoscroll just set the timeout:
autoSliderInterval = setInterval(_autoSlide, <your time>);

And if you want to stop auto sliding (for example this could happen when the user clicks on one button) just do:
clearInterval(autoSliderInterval) .

Basic example:

 const display = document.getElementById('display'); const button_sliderPrevious = document.getElementById('button_sliderPrevious'); const button_sliderNext = document.getElementById('button_sliderNext'); button_sliderPrevious.addEventListener('click', () => shiftSlide(-1)); button_sliderNext.addEventListener('click', () => shiftSlide(1)); const slides = [ 'slideOne', 'slideTwo', 'slideThree', 'slideFour', 'slideFive', 'slideSix' ]; let autoSliderInterval = setInterval(_autoSlide, 500); let currentSlideIndex = 0; function shiftSlide(amount) { // Stop the inverval if(autoSliderInterval !== null) { clearInterval(autoSliderInterval); autoSliderInterval = null; } // Shift the slide index currentSlideIndex += amount; // Check if below zero (if yes set to max) if(currentSlideIndex < 0) currentSlideIndex = slides.length - 1; // Check if over max (set to zero) if(currentSlideIndex >= slides.length) currentSlideIndex = 0; // Display the slide displaySlide(currentSlideIndex); } function _autoSlide() { // Increase Slide index currentSlideIndex++; // If slides are at the end begin from the start if(currentSlideIndex >= slides.length) currentSlideIndex = 0; // Display current slide displaySlide(currentSlideIndex); } function displaySlide(slideIndex) { display.innerText = slides[slideIndex]; }

 #display { text-align: center; height: 50px; width: 100%; border: 1px solid lightgray; }

 <div id="display"></div> <button id="button_sliderPrevious">Previous</button> <button id="button_sliderNext">Next</button>

Answer 2

Try this one.

i hope it will work for you.

<script type="text/javascript">
    var slideIndex = [1,1];
    var slideId = ["mySlides1", "mySlides2"]
    showSlides(1, 0);
    showSlides(1, 1);
    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }
    function showSlides(n, no) {
      var i;
      var x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {slideIndex[no] = 1}
      if (n < 1) {slideIndex[no] = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      x[slideIndex[no]-1].style.display = "block";
    }
    setInterval(function(){
       $(".next.slide_buttons").click();
    },3000);
</script>