Question

我正在尝试让https://jsfiddle.net/t8ap0gvz/4/允许上一个/下一个按钮在第一张和最后一张幻灯片之间导航。当前，您可以使用上一个/下一个按钮或图库按钮导航1-12，但是如果用户在幻灯片1上并尝试单击上一个按钮到12，则不允许它，并且如果用户在幻灯片12上并尝试单击下一个按钮以滑动1，这是不允许的。我如何允许此选项

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

showSlides();

function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
  slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}

function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";
}
slideIndex = no;
slides[no - 1].style.display = "block";
}

function plusSlides(n) {
var newslideIndex = slideIndex + n;
if (newslideIndex < 13 && newslideIndex > 0) {
  currentSlide(newslideIndex);
}
}

Answer 1

您可以像这样简单地向函数plusSlides(n)添加一些附加条件

  function plusSlides(n) {
    var newslideIndex = slideIndex + n;
    if (newslideIndex < 13 && newslideIndex > 0) {
      currentSlide(newslideIndex);
    }
    else if (newslideIndex > 12){
        currentSlide(1)
    }
    else currentSlide(12)
  }

滑块手动控制，允许上一个/下一个按钮从上一张幻灯片单击到第一张幻灯片

1 个答案: