纯html模板无法实现轮播，必须用javascript控制切换、css配合显隐；结构须为外层div.carousel包住carousel-images容器，内含多个带alt和宽高的img；显隐用display:block/none并固定容器高度；定时器需clearinterval清理，按钮必须用type="button"。
纯 HTML 模板本身无法实现轮播逻辑，必须靠 JavaScript 控制切换、CSS 配合显隐或动画——结构没搭对，后面所有交互都会卡死或错位。
HTML 结构必须用 div 包裹 img，不能直接平铺 img
浏览器不识别“轮播”语义，只认标签嵌套关系。把一堆 <img> 直接丢在 body 里，JS 就没法统一选中、设样式、切显隐。
- 正确结构是外层
<div class="carousel">，里面套一个图片容器（如 <code><div class="carousel-images">），每张图用独立 <code><img>放进去 - 别用
<ul><li><img></li></ul>开头就搞语义化——可访问性是加分项，但初学优先保证功能跑通；<ul></ul>会自带 margin/padding，容易干扰高度计算 - 绝对不要写
<img src="a.jpg,b.jpg,c.jpg">——src只接受单个 URL，逗号分隔根本无效，图不会显示 - 每张
<img>必须带alt和明确宽高（如width="600" style="max-width:90%"），否则图片加载时页面会抖动 - 所有
<img>初始统一设style="max-width:90%"，第一张额外加style="display: block;" - 切换时，先遍历全部
<img>设回display: none，再给目标索引的那张设display: block——顺序反了就会两张图同时显示 - 如果轮播容器没设死高度（比如只写
height: auto），display切换会触发重排，页面视觉上“跳一下”。必须加height: 400px这类固定值 - 别用
visibility: hidden替代——它占布局空间，可能把下面内容顶下去；也别用opacity: 0——透明图仍响应鼠标事件，且要加transition才能动 - 全局声明
let carouselTimer = null，每次调用setInterval前先clearInterval(carouselTimer) -
mouseenter时清定时器，mouseleave时重新setInterval（是否恢复可选，但暂停必须做） - 点击左右按钮或指示点后，同样要重置定时器——否则用户手动干预后，自动逻辑还在按原节奏执行
- 别用
setTimeout递归模拟轮播：堆栈深了易溢出，且多个setTimeout难统一清理 - 左右箭头写成
<button type="button" class="carousel-prev"></button>，指示点也用<button type="button" data-index="0"></button> -
type="button"明确告诉浏览器“这只是一个普通按钮”，不提交、不跳转、不刷新 - 别用
<div onclick="..."> 模拟按钮——键盘用户无法聚焦，屏幕阅读器识别不了交互意图 <li>禁用状态用 <code>disabled属性，而不是仅靠 CSS 灰掉；JS 中切换时记得同步更新disabled状态
display: none 切换最稳，但容器高度必须固定
用 display: block / display: none 控制显隐，是初学者最不容易出错的方式。比 opacity 或 transform 少一堆兼容性问题，也避免事件穿透。
setInterval 自动轮播必须配 clearInterval 清理
只写 setInterval(switchImage, 3000) 是典型新手坑：用户点按钮后定时器还在跑，结果刚切到第2张，0.5秒后又切走，画面失控。
导航按钮必须用 <button type="button"></button>
用 <a></a> 或没设 type 的 <button></button>，JS 报错或未加载时，点击会触发页面跳转或刷新，尤其在表单环境里极其危险。
轮播最难的部分不在 JS 逻辑，而在结构和样式的耦合细节：容器高度、图片宽高、定时器生命周期、按钮语义——这些地方一松动，整个轮播就会在不同设备或交互路径下崩出奇怪行为。
