display: none 是最稳的起点，因其彻底移除元素、不占空间、不拦截事件；而 opacity 和 transform 仍影响布局或依赖精确尺寸，易导致叠图、漏图等问题。
display: none 切换是最稳的起点，别一上来就搞 transform 或 opacity 动画——图片没切对，动画再顺也没用。
为什么先用 display 而不是 opacity 或 transform
初学者最常卡在“图片叠在一起”或“上一张没消失”，本质是显隐逻辑没理清。display: none 是硬切换：元素彻底退出渲染流，不占空间、不挡事件、不干扰布局。而 opacity: 0 还在文档流里，可能撑高容器或拦截点击；transform: translateX() 更依赖父容器 overflow: hidden 和精确尺寸，稍有偏差就漏图或错位。
实操建议：
- 所有轮播
<img>默认加style="max-width:90%"，第一张额外加style="display: block;" - 切换前必须先遍历所有图片，统一设回
display: none，再设目标项为display: block（顺序不能反） - 别用
visibility: hidden替代——它保留布局空间，轮播容器高度会随最多图那帧撑开
setInterval 自动轮播必须配 clearInterval
只写 setInterval(() => next(), 3000) 是危险操作：用户点按钮后定时器还在跑，next() 可能连触发两次，导致跳图、索引错乱甚至负数下标。
实操建议：
- 声明一个全局变量
let intervalId = null - 每次启动定时器前，先执行
clearInterval(intervalId) - 在
next()、prev()和手动切换函数末尾，都调用一次resetTimer()（里面重新setInterval并赋值给intervalId） - 给轮播容器加
mouseenter/mouseleave监听，悬停时clearInterval，移出时resetTimer（移动端可忽略）
导航按钮和指示点怎么绑定索引才不翻车
用 data-index 比用数组下标更可靠——DOM 顺序和 JS 数组顺序一旦不一致（比如中间插入/删除图），下标就全乱了。
实操建议：
- 按钮写成
<button type="button" data-index="0">1</button>，不要用<a href="#"></a>（默认跳页）或<input type="button">（表单提交风险） - JS 里统一用
parseInt(btn.dataset.index)取值，避免字符串拼接错误 - 指示点生成逻辑要和图片数量严格同步：遍历
document.querySelectorAll('.carousel-images img')动态创建，别手写 3 个<span></span>然后硬编码 - 当前激活的指示点加
aria-current="true"，提升可访问性
移动端悬停失效？别硬套 mouseenter
mouseenter 在触摸设备上基本不触发，但轮播暂停需求依然存在——用户手指刚摸到屏幕，就该停播，否则容易误触。
实操建议：
- 检测是否为触摸设备：
'ontouchstart' in window或matchMedia('(hover: none)').matches - 触摸设备改用
touchstart启动暂停，touchend恢复（注意防抖，避免快速滑动触发多次） - 更稳妥的做法是：只要页面获得焦点（
document.hasFocus()）就恢复播放，失焦即暂停——覆盖桌面切 Tab、手机切 App 等场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
