最直接可靠的轮播实现是用 display: none/block 切换独立 img 标签，配固定容器高度、正确定时器管理及语义化按钮；关键在控制“何时不该动”，而非仅关注动画效果。

display: none 切换是最直接、最不容易出错的起点，别一上来就搞 transform 或 opacity 动画。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 <div> 包 <code><img>，别塞进 <picture></picture> 或单个 src 里

• 所有轮播图必须是独立的 <img> 标签，每个带 alt 和显式宽高（如 width="600" style="max-width:90%"），避免布局抖动
• 容器用 <div class="carousel">，里面直接放 <code><img>，不套 <figure></figure>、<picture></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"></button>

• <a></a> 或 <div> 做按钮：没 <code>disabled 属性，JS 失效时无法禁用，还可能意外跳转
• <input type="button"> 语义弱，样式难统一
• 正确写法：<button type="button" data-index="0">1</button>，配合 JS 读取 dataset.index
• 指示点和箭头都应支持 disabled 状态（比如当前是第一张时，左箭头禁用）

切换逻辑顺序不能反：先清所有 display，再设当前

• 默认所有 <img> 带 style="max-width:90%"
• 切换函数里，先遍历全部图片设 display: none，再对目标索引那张设 display: block
• 顺序反了（先设目标为 block，再清其他）会导致短暂两张图同时显示
• 不要用 visibility: hidden 替代 —— 它占位，可能撑开父容器高度；也不要用 opacity: 0 —— 透明但仍响应点击，且动画需额外加 transition

轮播真正难的不是“怎么动”，而是“什么时候不该动”：鼠标悬停是否暂停、手动操作后是否重置计时、边界索引是否循环、JS 报错时降级是否仍可读。这些细节不处理，用户一碰就乱，比不动还糟。