javascript - 使用 javascript 将 slider 停止在最后一张图片处

Question

我是 javascript 的初学者，我正在寻找一种解决方案来在最后一张图片之后停止我的 slider 。以下代码向您展示了有关它的当前代码。大部分来自w3schools。

var slideIndex = 1;
showSlides(slideIndex);

function next_prev(n) {
  showSlides(slideIndex += n);
}

function startbild(){
  var slides = document.getElementsByClassName("mySlides");
  if(slides == 0){} else{
    slides[0].style.display = "block";
    for (i = 1; i < slides.length; i++) {
    slides[i].style.display = "none"; 
    document.getElementById("dia-shows").innerHTML = 1;
    }
  }
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
  }
  slides[slideIndex-1].style.display = "block";
  document.getElementById("dia-shows").innerHTML = slideIndex;
  document.getElementById("dia-gesamt").innerHTML = slides.length;
}

Answer 1

我认为，您的代码不完整。您可以发布一个工作示例来代替问题发生的位置吗？

改变

if (n < 1) {slideIndex = slides.length}
if (n > slides.length) {slideIndex = 1} 

至

if (n < 1) {
  slideIndex = 1;
} else if (n > slides.length) {
  slideIndex = slides.length;
} else {
  slideIndex = n;
}

应该在两个方向上做你想做的事情。

当第一帧或最后一帧可见时，您应该隐藏允许用户再次滑动的相关控件。

每当传递的 n 超出有效范围时，它就会被限制在该范围内。