自動播放在一頁上有多個幻燈片的 javascript 幻燈片不起作用

Question

我正在嘗試制作一個簡單的 javascript 幻燈片，它將使用上一個和下一個按鈕循環播放和自動播放。 另外，需要在一頁上有多個幻燈片。

無法在加載時自動播放工作？ 我錯過了什么嗎？

我一直在使用的代碼在一個頁面上使用多個，並且上一個和下一個按鈕起作用。 但是，自動播放在窗口加載時不起作用，但是當您單擊上一個和下一個按鈕之一時會開始工作。

謝謝。

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

我建議你不要重置你的間隔。

如果你有一個像這樣的數組：

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

];

你可以這樣做：

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);
}

然后如果你想 acutoscroll 只需設置超時：
autoSliderInterval = setInterval(_autoSlide, <your time>);

如果您想停止自動滑動（例如，當用戶單擊一個按鈕時可能會發生這種情況），只需執行以下操作：
clearInterval(autoSliderInterval) 。

基本示例：

 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

試試這個。

我希望它對你有用。

<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>