关于幻灯片列表默认显示首张图片的技术问题咨询

以下基于原生HTML/CSS/JS实现，可根据自身技术栈适配调整：

核心实现逻辑 #

• 所有幻灯片图片默认设为隐藏状态，仅给第一张图片添加显式的展示类
• 给幻灯片容器绑定点击事件，每次点击时切换当前展示的图片索引，更新展示类的绑定对象

代码示例 #

HTML 结构 #

<div class="slider-container">
  <img src="你的第一张图地址" class="slide-item active" alt="幻灯片1">
  <img src="你的第二张图地址" class="slide-item" alt="幻灯片2">
  <img src="你的第三张图地址" class="slide-item" alt="幻灯片3">
  <!-- 可按需添加更多幻灯片图片 -->
</div>

CSS 样式 #

.slide-item {
  display: none;
  /* 可自行添加适配你页面的宽高、圆角等样式 */
  width: 100%;
  height: auto;
}
/* 仅带active类的图片会展示 */
.slide-item.active {
  display: block;
}

JS 交互逻辑 #

const slides = document.querySelectorAll('.slide-item');
let currentSlideIndex = 0;

document.querySelector('.slider-container').addEventListener('click', () => {
  // 隐藏当前展示的图片
  slides[currentSlideIndex].classList.remove('active');
  // 计算下一张图片索引，示例为循环切换，不需要循环可替换为下方注释代码
  currentSlideIndex = (currentSlideIndex + 1) % slides.length;
  // 非循环逻辑：if(currentSlideIndex < slides.length - 1) currentSlideIndex += 1
  // 展示下一张图片
  slides[currentSlideIndex].classList.add('active');
})

其他技术栈适配 #

• React：将当前展示索引存为state，点击时更新state，通过条件渲染或className判断控制图片显隐
• Vue：将当前展示索引存为响应式变量，通过v-show/v-if或者动态class控制图片显隐

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