HTML无法实现自动切换轮播图，因其仅描述结构而无执行逻辑；必须依赖JavaScript通过setInterval控制定时切换，并结合CSS opacity过渡实现平滑效果，同时需处理暂停、手动切换及指示器同步等交互细节。
HTML 本身不能实现自动切换轮播图——它没有执行逻辑的能力，只负责描述结构。真要“自动切换”，必须靠 JavaScript 控制定时器和图片状态，或用 CSS 配合伪类做手动触发式切换（非自动）。下面直说怎么做、为什么这么选、容易掉进哪些坑。
为什么不能只写 HTML 就让图片动起来
你写再多 <img> 标签，浏览器也只会把它们全渲染出来，堆在一起或排成一行，不会自己换图、不会计时、不会隐藏其他图。所谓“轮播”，本质是运行时行为：定时改 src、切 class、改 transform 值——这些都得靠脚本驱动。
常见误解是看到某些“纯 HTML 轮播”示例，其实背后悄悄加了 <script>，或者用了 :checked + radio + ~ 选择器模拟点击切换——但那不是自动的，用户不点，图就不动。
setInterval 是最简自动切换的核心
原生 JS 实现自动轮播，setInterval 是绕不开的起点。它按固定毫秒间隔反复执行函数，正好匹配“每3秒切一张”的需求。
立即学习“前端免费学习笔记（深入）”；
-
setInterval的第二个参数单位是毫秒，3000表示 3 秒；设太小（如100）会导致卡顿或跳图 - 索引更新要用取余：
index = (index + 1) % images.length，否则到最后一张再加就变undefined - 直接赋值
img.src = images[index]最快，但会闪——因为浏览器要重新加载图片，没过渡效果 - 图片路径必须真实存在，否则控制台报
404，但setInterval不会停，轮播逻辑照常跑
想平滑过渡？别只换 src，得预加载+显隐控制
直接改 src 没法加淡入淡出，因为 <img> 元素本身不支持 opacity 过渡（除非提前设好 CSS）。真正平滑的做法是：所有图一次性加载进 DOM，用 CSS 控制哪张 opacity: 1，其余 opacity: 0，再配合 transition。
- 结构上得用容器包住多张
<img>，全部position: absolute叠在一起 - CSS 必须写
img { transition: opacity 0.4s ease; }，否则opacity变化是瞬时的 - JS 只负责切
class或改style.opacity，不碰src——避免重复加载和闪烁 - 大图多时，首屏加载压力大，得考虑懒加载（
loading="lazy"）或压缩尺寸
鼠标悬停暂停、左右按钮控制这些功能怎么加
自动轮播一旦跑起来，用户需要干预权。暂停/播放、上一张/下一张不是锦上添花，而是基本体验底线。
- 暂停用
clearInterval(timerId)，恢复用timerId = setInterval(...)，记得把timerId存成变量 - 鼠标移入容器触发暂停，移出恢复——但得防快速进出导致 timer 状态混乱，建议加个
isPaused标志位 - 左右按钮绑定
click事件，更新index后立即刷新显示，不用等定时器；边界处理用index = (index + len - 1) % len（上一张）和(index + 1) % len（下一张） - 指示器（小圆点）要同步更新：给每个
<span>绑data-index，JS 里根据当前index切 active 类
真实项目里，轮播的“自动”只是起点，后续交互、响应式、可访问性（键盘导航、aria-live）、性能（节流、硬件加速）才是容易被忽略的复杂点。别急着套框架，先把 setInterval + opacity + clearInterval 这三样串通，再往上叠功能。
