纯HTML无法实现轮播图，必须配合CSS隐藏/显示控制和JavaScript切换逻辑；src属性只接受单个URL，逗号分隔会被忽略；所有图片需为独立元素或容器，须设alt属性；display:none更稳，opacity:0需配transition；setInterval必须用clearInterval清理，导航按钮须用<button type="button">。
纯 HTML 无法实现轮播图——必须配合 CSS 隐藏/显示控制 + JavaScript 切换逻辑，否则只是静态图片堆砌。
为什么不能只用 <img src="a.jpg,b.jpg"> 实现轮播
这是初学者最常踩的坑：src 属性只接受单个 URL 字符串，写成逗号分隔会被浏览器当作非法路径直接忽略，最终渲染为空白或 404 占位图。轮播本质是“同一位置轮流展示不同内容”，不是“一个标签加载多张图”。
- 所有图片必须作为独立
<img>元素存在，或包裹在独立容器（如<div class="carousel-item">）中 - 结构上推荐用
<div class="carousel">包裹全部子项，避免语义混乱或选择器冲突 - 每张图必须带
alt属性，否则可访问性检测失败，且 SEO 友好度归零
display: none vs opacity: 0：选哪个更稳
多数场景下优先用 display: none，它简单、无过渡副作用、兼容性好；opacity: 0 只在需要淡入淡出动画时才引入，且必须配 transition 和额外状态管理。
-
display: none不占文档流，父容器高度可固定（如height: 400px），避免页面跳动 -
visibility: hidden会占位，可能撑高容器导致布局异常，不推荐 - 若用
opacity，记得给容器加overflow: hidden，否则半透明图仍可能响应点击或焦点事件 - 切换前务必统一设所有项为隐藏态，再设目标项为可见，顺序反了会导致闪现两张图
setInterval 自动轮播必须配 clearInterval
漏掉清理定时器是轮播失控的头号原因：鼠标悬停后继续切图、点按钮后双倍速度、页面切换回来定时器还在跑……根源都是旧 setInterval 实例未清除。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量如
let carouselTimer = null，每次启动前先clearInterval(carouselTimer) -
mouseenter时清定时器，mouseleave时重新setInterval，不要在mouseleave里直接调startSlide()（易重复创建） - 手动点击导航按钮后，也要立刻
clearInterval(carouselTimer)并重置计时，否则刚切到第2张，0.5秒后又切到第3张 - 别用
setTimeout递归模拟轮播——堆栈风险高，且无法统一销毁
导航按钮必须用 <button type="button">
用 <a href="#"> 或裸 <div> 做按钮，会在 JS 失效或禁用时触发跳页、刷新或无响应，破坏基础可用性。
-
<button type="button">默认不提交、不跳转，语义准确，支持disabled属性 - 左右箭头建议加
aria-label，如aria-label="上一张"，满足无障碍要求 - 指示点（dots）用
<button type="button" data-slide-to="0">，比<span>更健壮，天然支持键盘Enter/Space触发 - 所有交互元素需有明确焦点样式（如
outline），否则键盘用户无法感知当前操作位置
真正难的不是让图动起来，而是让每一次切换都“不意外”：不跳动、不卡顿、不抢焦点、不丢状态。这些细节藏在 clearInterval 的时机、display 的顺序、button 的类型里，而不是炫酷动画中。
