javascript - 在第一张和最后一张幻灯片上禁用上一个/下一个箭头

Question

我是创建网站的初学者。 我在网站上创建的幻灯片需要帮助。我将代码复制并粘贴到我的网站上，但我的幻灯片显示不同(显示为列) 此外，我想禁用第一张幻灯片上的上一个箭头和最后一张幻灯片上的下一个箭头。 https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

.mySlides {
  display: none;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

谢谢你的帮助

Answer 1

您需要检查 slideIndex += n 值(通过单击箭头按钮)是否与您拥有的幻灯片数量相同，如果是，则禁用下一个按钮，因为没有更多幻灯片。

与上一张幻灯片的逻辑相同。如果索引是您开始的地方，则禁用上一个按钮。

这是一个例子:

var slides = document.getElementsByClassName("mySlides");
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {
  var newIndex = slideIndex += n;

  handleDisabled(newIndex);

  showDivs(newIndex);
}

function showDivs(n) {
  var i;
  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";
}

function handleDisabled(newIndex) {
  prevBtn.disabled = false;
  nextBtn.disabled = false;

  if (newIndex === slides.length) {
    nextBtn.disabled = true;
  } else if (newIndex === 1) {
    prevBtn.disabled = true;
  }
}

.mySlides {
  display: none;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
  <img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">

  <button id="prevBtn" disabled class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button id="nextBtn" class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>