父容器必须设 position: relative，否则 absolute 子元素全堆左上角；图片统一设 top: 0; left: 0;，按 HTML 顺序自然层叠；opacity 配合 pointer-events: none 和 z-index 控制显隐与交互；手动切换前需 clearInterval 旧定时器；触摸滑动需记录 startX 并计算差值判断方向。
用 position: absolute 堆叠图片时，为什么只有第一张显示？
因为没给父容器设 position: relative，所有 absolute 子元素会相对于最近的定位祖先（或 body）堆叠，结果全挤在左上角重叠，视觉上只看到最上面那张。父容器必须显式定位，否则堆叠基准就错了。
- 父容器加
position: relative是硬性前提，不是可选项 - 所有图片统一设
position: absolute; top: 0; left: 0;，才能真正层叠对齐 - 别依赖
z-index控制初始顺序——直接按 HTML 顺序写图片，后写的自然在上层，更可控
切换幻灯片时，opacity 和 visibility 哪个更合适？
opacity: 0 配合 transition 能做淡入淡出，但元素仍占文档流、响应点击；visibility: hidden 不占空间也不响应事件，但无法过渡。实际中多数情况要的是「不交互 + 有动画」，所以得组合用：
- 用
opacity控制渐变，同时加pointer-events: none禁用点击穿透 - 切到非当前项时，除了
opacity: 0，还得加z-index: -1（或更低值），避免遮挡按钮/导航控件 - 别只靠
display: none切换——它不触发 CSS 过渡，会突兀消失
用 setInterval 自动轮播，怎么防止用户手动切换后冲突？
自动轮播和手动点击共存时，最大的坑是定时器没清理，导致多个 setInterval 同时运行，图片乱跳甚至卡死。
- 每次手动切换前，先用
clearInterval清掉旧定时器，再重新setInterval - 把定时器 ID 存成变量（比如
let autoPlayId），别用全局或匿名引用 - 用户鼠标悬停在幻灯片区域时，建议暂停自动播放：
element.addEventListener('mouseenter', () => clearInterval(autoPlayId))
移动端触摸滑动切换，为什么 touchstart/touchend 拿不到位移？
因为没记录起始坐标，或者没在 touchend 里算差值。纯 CSS 幻灯片本身不处理手势，必须靠 JS 补足逻辑。
立即学习“前端免费学习笔记（深入）”；
- 在
touchstart中记下event.touches[0].clientX到变量startX - 在
touchend中读event.changedTouches[0].clientX，算差值：diff = startX - endX - 判断
Math.abs(diff) > 50再执行切换，避免误触；差值正负决定方向 - 记得给容器加
touch-action: pan-y，防止横向滑动时页面也跟着拖拽
绝对定位堆叠本身很简单，难的是边界控制：谁该响应交互、何时该停自动轮播、触摸阈值设多少才不反人类——这些细节不处理好，用户一上手就懵。
