图片轮播网站故障求助：图片不显示及后退按钮不可点击

问题1：图片无法显示 #

原因分析 #

JS逻辑的轮播位移计算本身没问题，问题出在CSS样式配置缺失：

• .slider容器未设置overflow: hidden，导致所有slide横向溢出容器，无法形成轮播的视觉遮挡效果
• .slide元素未设置min-width: 100%，每个slide无法占满容器宽度，轮播位移的currentSlide * 100%计算失去意义
• 图片未设置适配规则，即使slide宽度正确，图片也无法填充容器

修复方案 #

添加/修改以下CSS样式：

.slider {
  position: relative;
  width: 100%;
  overflow: hidden; /* 隐藏溢出的slide */
  display: flex; /* 让slide横向排列 */
  height: 400px; /* 可根据需求调整高度 */
}

.slide {
  min-width: 100%; /* 每个slide占满容器宽度 */
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持比例不变形 */
}

问题2：后退按钮被遮挡无法点击 #

原因分析 #

按钮被.slider元素拦截点击，是因为层级关系（z-index）配置错误：slider的默认层级高于按钮，即使图片未显示，slider的元素区域依然会覆盖按钮，阻断点击事件。

修复方案 #

给按钮设置更高层级，同时确保按钮为定位元素（z-index仅对position为relative/absolute/fixed的元素生效）：

#prevBtn, #nextBtn {
  position: absolute;
  z-index: 10; /* 确保层级高于slider */
  top: 50%;
  transform: translateY(-50%);
  padding: 12px 16px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  cursor: pointer;
}

#prevBtn {
  left: 10px;
}

#nextBtn {
  right: 10px;
}

额外优化建议 #

• 移除window.addEventListener('load', updateSlider)，DOMContentLoaded已在DOM加载完成后执行，且初始updateSlider()已调用，重复调用会造成不必要的重绘
• 给.slider添加transition: transform 0.3s ease，让轮播切换有平滑过渡效果

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