最直接可靠的轮播实现是用 display: none/block 切换独立 img 标签，配固定容器高度、正确定时器管理及语义化按钮；关键在控制“何时不该动”，而非仅关注动画效果。
display: none 切换是最直接、最不容易出错的起点，别一上来就搞 transform 或 opacity 动画。
用 <div> 包 <img>，别塞进 <picture> 或单个 src 里
- 所有轮播图必须是独立的
<img> 标签，每个带 alt 和显式宽高（如 width="600" height="400"），避免布局抖动
- 容器用
<div class="carousel">，里面直接放 <img>，不套 <figure>、<picture> 或 <li>（除非你明确需要语义或框架约束）
- 错误写法：
<img src="a.jpg,b.jpg,c.jpg"> —— src 只接受单 URL，这种写法完全无效
- 如果后续要加 CSS 过渡，给容器设固定高度（如
height: 400px），否则 display 切换会触发重排，页面跳动
setInterval 必须配 clearInterval，否则定时器堆叠
- 全局存一个变量：
let carouselTimer = null
- 每次启动前先执行
clearInterval(carouselTimer)，再赋新值
- 用户
mouseenter 轮播区时调 clearInterval，mouseleave 时重新 setInterval
- 点击左右按钮或指示点后，也要立刻重置定时器；否则刚切到第 2 张，0.5 秒后又切走，体验断裂
- 别用
setTimeout 递归模拟轮播——容易栈溢出，且无法统一清理
导航按钮必须是 <button type="button">
-
<a> 或 <div> 做按钮：没 disabled 属性，JS 失效时无法禁用，还可能意外跳转
-
<input type="button"> 语义弱，样式难统一
- 正确写法：
<button type="button" data-index="0">1</button>，配合 JS 读取 dataset.index
- 指示点和箭头都应支持
disabled 状态（比如当前是第一张时，左箭头禁用）
切换逻辑顺序不能反：先清所有 display，再设当前
- 默认所有
<img> 带 style="display: none;"
- 切换函数里，先遍历全部图片设
display: none，再对目标索引那张设 display: block
- 顺序反了（先设目标为
block，再清其他）会导致短暂两张图同时显示
- 不要用
visibility: hidden 替代 —— 它占位，可能撑开父容器高度；也不要用 opacity: 0 —— 透明但仍响应点击，且动画需额外加 transition
<img> 标签，每个带 alt 和显式宽高（如 width="600" height="400"），避免布局抖动 <div class="carousel">，里面直接放 <img>，不套 <figure>、<picture> 或 <li>（除非你明确需要语义或框架约束） <img src="a.jpg,b.jpg,c.jpg"> —— src 只接受单 URL，这种写法完全无效 height: 400px），否则 display 切换会触发重排，页面跳动 setInterval 必须配 clearInterval，否则定时器堆叠
- 全局存一个变量：
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer)，再赋新值 - 用户
mouseenter轮播区时调clearInterval，mouseleave时重新setInterval - 点击左右按钮或指示点后，也要立刻重置定时器；否则刚切到第 2 张，0.5 秒后又切走，体验断裂
- 别用
setTimeout递归模拟轮播——容易栈溢出，且无法统一清理
导航按钮必须是 <button type="button">
-
<a> 或 <div> 做按钮：没 disabled 属性，JS 失效时无法禁用，还可能意外跳转
-
<input type="button"> 语义弱，样式难统一
- 正确写法：
<button type="button" data-index="0">1</button>，配合 JS 读取 dataset.index
- 指示点和箭头都应支持
disabled 状态（比如当前是第一张时，左箭头禁用）
切换逻辑顺序不能反：先清所有 display，再设当前
- 默认所有
<img> 带 style="display: none;"
- 切换函数里，先遍历全部图片设
display: none，再对目标索引那张设 display: block
- 顺序反了（先设目标为
block，再清其他）会导致短暂两张图同时显示
- 不要用
visibility: hidden 替代 —— 它占位，可能撑开父容器高度；也不要用 opacity: 0 —— 透明但仍响应点击，且动画需额外加 transition
<a> 或 <div> 做按钮：没 disabled 属性，JS 失效时无法禁用，还可能意外跳转 <input type="button"> 语义弱，样式难统一 <button type="button" data-index="0">1</button>，配合 JS 读取 dataset.index disabled 状态（比如当前是第一张时，左箭头禁用） display，再设当前
- 默认所有
<img>带style="display: none;" - 切换函数里，先遍历全部图片设
display: none，再对目标索引那张设display: block - 顺序反了（先设目标为
block，再清其他）会导致短暂两张图同时显示 - 不要用
visibility: hidden替代 —— 它占位，可能撑开父容器高度；也不要用opacity: 0—— 透明但仍响应点击，且动画需额外加transition
轮播真正难的不是“怎么动”，而是“什么时候不该动”：鼠标悬停是否暂停、手动操作后是否重置计时、边界索引是否循环、JS 报错时降级是否仍可读。这些细节不处理，用户一碰就乱，比不动还糟。
