我希望它对您有用。

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

然后，如果您要自动滚动，请设置超时时间：
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>

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

2 个答案:

我希望它对您有用。