图片轮播不可见前后按钮实现及布局错位问题排查

核心问题梳理 #

1. 缺少后退触发逻辑，仅实现了前进点击
2. 轮播容器布局限制了点击区域，无法扩展到页面边缘
3. 未处理无效DOM元素（dot）导致JS报错，影响轮播功能

1. HTML结构调整 #

修改轮播容器结构，添加全屏左右点击区域，移除图片上的冗余点击事件：

<div class='desktop'>
  <!-- 左侧后退点击区域 -->
  <div class="slide-nav slide-nav-prev" onclick="pslide(-1)"></div>
  <div class="slideshow-container">
    <!-- 原轮播内容 -->
    <div class="slides">
      <img src="img4/1 ACWA Cover.jpg">
      <br><strong>The American Southwest Archive Pt.1</strong>
      <br>2023
      <br>Published by B12 Books
      <br><a href="https://shop.justin-guthrie.com/">Store</a>
    </div>
    <div class="slides">
      <img src="img4/2 ACWA pages.jpg">
    </div>
    <div class="slides">
      <img src="img4/3 ACWA pages.jpg">
    </div>
  </div>
  <!-- 右侧前进点击区域 -->
  <div class="slide-nav slide-nav-next" onclick="pslide(1)"></div>
</div>

2. CSS样式修改 #

调整布局，让左右导航区域占满页面剩余宽度，保持透明可点击：

/* 修改desktop为横向flex布局，让左右导航填充剩余空间 */
.desktop {
  display: flex;
  height: 100vh;
  align-items: center;
  flex-direction: row;
}

/* 左右导航区域样式 */
.slide-nav {
  flex: 1;
  height: 100%;
  cursor: pointer;
}
.slide-nav-prev {
  cursor: w-resize;
}
.slide-nav-next {
  cursor: e-resize;
}

/* 调整轮播容器布局，移除纵向flex限制 */
.slideshow-container {
  max-height: 80%;
  max-width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

可选：hover显示按钮提示

.slide-nav:hover::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.2);
  border-radius: 50%;
}
.slide-nav-prev:hover::after {
  left: 20px;
}
.slide-nav-next:hover::after {
  right: 20px;
}

3. JavaScript逻辑修正 #

移除无效的dot元素相关代码，确保后退逻辑正常执行：

/*slide code */
var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  
  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";
}

4. Navbar冲突排查 #

1. 变量命名无重复，不存在命名冲突
2. 若navbar拦截轮播点击，可添加层级控制：

.navbar {
  z-index: 10;
}
.slide-nav {
  z-index: 5;
}

3. 移动端布局中，确保折叠后的navbar不会覆盖导航区域

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