如何在模态弹窗轮播中隐藏首张图左箭头与末张图右箭头

实现方案 #

• 首先在CSS中新增箭头隐藏类，用于控制箭头显隐
• 移除原有JS代码中的轮播循环逻辑，避免首尾切换和箭头显隐规则冲突
• 在showSlides方法中新增箭头显隐的判断逻辑，根据当前轮播下标控制左右箭头的展示

新增CSS代码

.arrow-hide {
  display: none !important;
}

修改后的JS代码

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");
  var prevArrow = document.querySelector('.prev');
  var nextArrow = document.querySelector('.next');
  // 移除原有循环逻辑，限制下标范围
  if (n > slides.length) {
    slideIndex = slides.length
  }
  if (n < 1) {
    slideIndex = 1
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";

  // 箭头显隐控制逻辑
  if(slideIndex === 1) {
    // 第一张仅显示右箭头
    prevArrow.classList.add('arrow-hide');
    nextArrow.classList.remove('arrow-hide');
  } else if(slideIndex === slides.length) {
    // 最后一张仅显示左箭头
    prevArrow.classList.remove('arrow-hide');
    nextArrow.classList.add('arrow-hide');
  } else {
    // 中间幻灯片同时显示两个箭头
    prevArrow.classList.remove('arrow-hide');
    nextArrow.classList.remove('arrow-hide');
  }
}

注意：你原代码中存在重复的id="caption"元素不符合HTML规范，同时没有定义demo类的点位元素，上述代码已暂时注释掉相关无用逻辑，不影响箭头功能正常使用，后续需要标题赋值/点位功能时可自行补充对应逻辑即可。

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