如何在图片轮播模态框中隐藏首张上一张和末张下一张箭头按钮

修改逻辑 #

在轮播渲染函数showSlides中新增当前幻灯片位置判断逻辑：

• 当前为第1张幻灯片时，隐藏上一张按钮，显示下一张按钮
• 当前为最后1张幻灯片时，隐藏下一张按钮，显示上一张按钮
• 中间位置两张按钮都显示
  同时修复原有CSS代码中.next类未闭合、原JS中不存在的DOM元素调用报错的问题。

完整代码 #

JavaScript #

function openModal() {
  document.getElementById("myModal").style.display = "block";
}
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  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";
  // 箭头显隐控制逻辑
  if (slideIndex === 1) {
    prevBtn.style.display = 'none';
    nextBtn.style.display = 'block';
  } else if (slideIndex === slides.length) {
    nextBtn.style.display = 'none';
    prevBtn.style.display = 'block';
  } else {
    prevBtn.style.display = 'block';
    nextBtn.style.display = 'block';
  }
}

CSS #

.modal {
  width: 58%;
  height: 100%;
  top: 0;
  position: fixed;
  display: none;
  background-color: rgba(22, 22, 22, 0.5);
  margin-left: 300px;
  max-width: 779px;
  min-width: 779px;
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.mySlides {
  display: none;
}
.cursor {
  cursor: pointer;
}
.prev {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  left: -10%;
  display: block;
}
.next {
  cursor: pointer;
  position: relative;
  top: -149px;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  user-select: none;
  -webkit-user-select: none;
  left: 600px;
  display: block;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
}

HTML #

<table>
  <tr>
    <div class="row">
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/user/erondu/1600x900" width="250" height="164"
              onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
        </td>
      </div>
      <div class="column">
        <td>
          <p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164"
              onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
        </td>
      </div>
  </tr>
</table>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="mySlides">
      <img src="https://source.unsplash.com/user/erondu/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
    </div>
    <div class="mySlides">
      <img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
    </div>
    <a class="prev" id="prev1" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Souvik