最简单可靠的轮播方案是用setinterval配合display:none/block切换：外层div设固定高度防跳动，每张img独立且初始全hidden、仅首张block，切换时先全设none再设目标block；定时器必须全局管理，每次启动前clearinterval，鼠标悬停和按钮点击后也要重置，避免多定时器冲突。
直接用 setInterval 配合 display: none/block 切换是最简单、兼容性最好、也最容易调试的自动轮播方案。别一上来就套 Swiper 或写 CSS 动画，先跑通逻辑再加动效。
用 div 包 img，别用 ul/li 或 picture
结构越扁平，JS 控制越稳。常见错误是把所有图塞进一个 ul 里再用 transform: translateX() 滑动——这会引入定位计算、过渡延迟、父容器高度塌陷等问题。正确做法：
- 外层用
<div class="carousel">，设固定高度（如 <code>height: 400px），避免切换时页面跳动 - 每张图用独立
<img>，带alt和显式width/height属性，防止布局抖动 - 不要用
<picture></picture>或<source></source>开始就搞响应式，先确保单尺寸能切 -
src必须是单个 URL，src="a.jpg,b.jpg"是无效写法 -
visibility: hidden占位，可能撑高父容器，导致轮播区留白 -
opacity: 0不占位但响应鼠标事件，且必须配transition，动画卡顿或 JS 中断时状态易错乱 -
transform: translateX()需要精确计算偏移量，多图时容易索引偏移、边界判断出错 - 初始所有
img设display: none，仅第一张加display: block；切换时先全设none，再设目标项为block，顺序不能反 - 定义全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再carouselTimer = setInterval(...) -
mouseenter时clearInterval，mouseleave时重置定时器 - 左右按钮点击后，也要立刻
clearInterval并重启，否则刚切到第 2 张，0.5 秒后又切到第 3 张 - 别用
setTimeout递归模拟——堆栈风险高，且无法统一销毁 - 点击触发页面跳顶（
#锚点行为） - JS 报错或未加载时，按钮默认提交表单或跳转，破坏体验
- 无法用
disabled属性禁用状态，悬停/点击反馈失控 - 语义清晰、天然防刷新、支持键盘聚焦和屏幕阅读器
手动控制显隐比 opacity/transform 更可靠
用 style.display = 'none' 和 style.display = 'block' 是最快、最无副作用的显示控制方式。对比其他方式：
自动轮播必须配定时器清理逻辑
setInterval(switchImage, 3000) 单独写等于埋雷。用户悬停、点击按钮后不清理，会导致多个定时器并发执行，图片乱跳。关键点：
导航按钮必须用 <button type="button"></button>
用 <a href="#"></a> 或没设 type 的 <button></button> 是高频翻车点。问题包括：
复杂点不在动效，而在状态同步：索引变量、DOM 显隐、定时器生命周期、用户交互中断时机——这四者只要一个脱节，轮播就失步。先保功能正确，再谈过渡丝滑。
