轮播图必须用 javascript 实现自动播放，纯 html 或 css 无法满足动态控制、用户交互和循环边界等需求；推荐 setinterval + dom class 切换方案，配合暂停恢复逻辑、图片错误兜底及尺寸防护。

轮播图必须用 JavaScript 才能自动播放

纯 HTML 或纯 CSS 无法实现真正可用的自动轮播。HTML 没有定时能力，CSS @keyframes 虽然能动，但不能响应用户操作、无法动态跳转、也不支持循环边界控制（比如最后一张切回第一张）。实际项目里，setInterval + DOM 操作是最稳的选择。

结构要避免 img 直接平铺，推荐用 class 控制显隐

别把所有 <img> 并列写在页面里然后靠 display: none 切换——DOM 节点多、重排开销大、移动端容易卡。更轻量的做法是统一容器 + class 切换：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 外层 <div class="carousel"> 设固定宽高和 <code>overflow: hidden
• 内部 <div class="slides"> 包所有 <code><img>，每张加 class="slide"
• 当前显示项额外加 class="active"，CSS 里只让 .slide.active 显式显示
• 初始状态确保仅一张有 active，否则可能多图叠加或全黑

自动播放必须带暂停逻辑，否则用户根本看不清

直接写 setInterval(nextSlide, 3000) 是危险的。用户鼠标一悬停就该停，手指一滑也要停，否则体验极差。关键不是“怎么启”，而是“怎么停又怎么续”：

• 用布尔变量 isPaused = false 控制是否执行切换
• mouseenter 和 touchstart 时设 isPaused = true，mouseleave 和 touchend 时设 isPaused = false
• 左右按钮点击也得设 isPaused = true，防止手动切完立刻被自动逻辑覆盖
• 不要在暂停时 clearInterval 后就不管了——恢复时得重新 setInterval，否则定时器丢失

图片加载失败会导致轮播塌陷，必须提前兜底

本地跑得好好的，一上线就白屏或高度归零？大概率是某张图 404 或跨域被拒，<img> 加载失败后 offsetHeight 为 0，整个 .carousel 容器塌掉。这不是 JS 错，是 HTML 层没防住：

• 给每张 <img> 加 width 和 height 属性（如 width="800" style="max-width:90%"），强制保留占位
• 加 onerror 回调：onerror="this.style.display='none'"，或替换成 SVG 占位符
• 避免用 background-image 做轮播图——它不触发 onerror，也拿不到自然尺寸
轮播图真正的难点不在“怎么动起来”，而在“动得稳、停得准、塌不了”。很多问题都是上线后才暴露，比如 touch 事件没监听、图片 404 不报错、定时器没清导致内存泄漏——这些细节比动画效果本身更值得花时间盯紧。