如何用HTML/CSS/JavaScript实现图片堆叠及点击按钮循环切换效果？

实现第一步的核心思路 #

你可以按这个步骤快速完成基础功能的搭建：

• 首先调整CSS规则：
  给.image-collection添加默认属性display: none，再新增一个.active专属类，设置display: block。初始状态下给第一张图的元素加上active类，这样页面加载后默认只会显示第一张图。
• 补充HTML结构：
  在.box容器内部添加切换按钮，示例：<button id="switchBtn">查看下一张</button>
• 写最简JS逻辑：
  1. 用document.querySelectorAll('.image-collection')获取所有图片元素，存为一个数组
  2. 定义初始计数变量currentIndex = 0，对应当前显示的图片下标
  3. 给按钮绑定点击事件：每次点击时先移除当前下标对应元素的active类，计数加1后判断如果等于图片数组长度就重置为0，最后给新下标对应的元素加上active类即可

如果不需要同位置切换，保留你现在写的偏移position属性也可以，测试的时候能更直观看到切换是否生效。

内容的提问来源于stack exchange，提问作者J.A.C.K.