最简轮播图需三部分：结构（div套图）、样式（overflow:hidden+定宽）、逻辑（定时器+transform位移）；避免margin-left重排、清除定时器防假死、悬停暂停自动轮播、SVG fallback防塌陷、touch事件支持滑动。
轮播图用原生 HTML + CSS + JS 最简实现方式
不用框架、不引第三方库，纯手写也能跑起来的轮播图，核心就三块：结构（<div>套图）、样式（overflow: hidden + 定宽容器）、逻辑（定时器 + offsetLeft 或 transform 位移）。关键不是“多炫”，而是“能切、不卡、不崩”。
常见错误是直接用 margin-left 动画切图——会导致布局重排，卡顿明显；或者没清定时器，切着切着页面假死。
- 图片统一放在一个
<div class="carousel-inner">里，每张图用<div class="carousel-item">包裹 - 容器设固定宽高 +
overflow: hidden，内部用display: flex横向排列所有.carousel-item - 切换靠
transform: translateX(-Npx)，N = 当前索引 × 单图宽度，比改left或margin更高效 - 记得在
window.onunload或组件销毁时调用clearInterval，否则用户切走再回来可能多个定时器并发运行
自动轮播 + 手动点击切换必须共存的写法
只自动不手动，用户还没看清就切走了；只手动不自动，又显得呆板。两者共存的关键是「暂停自动、恢复自动」的时机控制。
不要在点击按钮时直接 clearInterval 就完事——下次怎么恢复？更稳妥的是用一个布尔开关 + 重启定时器：
立即学习“前端免费学习笔记（深入）”；
let isPaused = false;
const startTimer = () => {
timer = setInterval(() => {
if (!isPaused) nextSlide();
}, 3000);
};
// 点击按钮或鼠标悬停时
document.querySelector('.carousel').addEventListener('mouseenter', () => {
isPaused = true;
});
document.querySelector('.carousel').addEventListener('mouseleave', () => {
isPaused = false;
});
- 悬停暂停比点击暂停更符合直觉，用户移开鼠标就继续，不用额外“恢复”操作
- 左右箭头按钮的
click事件里也要设isPaused = true，避免手动切图后立刻被自动逻辑覆盖 - 移动端需补上
touchstart和touchend，否则手指滑动时无法暂停
图片加载失败时轮播图不塌陷的兜底方案
本地测试看着好好的，一放服务器就出现空白幻灯片——大概率是某张图 404 或跨域被拒，<img> 加载失败后高度为 0，整个轮播容器塌成一条线。
最轻量的修复不是等 JS 监听 onerror 再替换，而是在 HTML 层就加默认尺寸和占位：
<div class="carousel-item">
<img src="photo1.jpg" alt="风景"
onerror="this.src='data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"400\" viewBox=\"0 0 800 400\"><rect width=\"100%\" height=\"100%\" fill=\"%23eee\"/><text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-family=\"sans-serif\" font-size=\"16\" fill=\"%23999\">图片加载失败</text></svg>'"/>
</div>
- 用内联 SVG 作 fallback，无网络请求、无跨域问题，且可随容器缩放
-
alt文本必须写，否则无障碍阅读器会读出空内容 - 别依赖 CSS 的
min-height强撑高度——如果图没加载，img元素本身不占空间，父容器仍会坍缩
移动端 touch 滑动支持的最小可行代码
鼠标滚轮或点击箭头在手机上完全不可用，必须加 touch 支持。但不用整套手势库，只需监听三个事件：touchstart、touchmove、touchend，记录位移差值判断方向。
重点不是“多精准”，而是“不误触”：滑动距离小于 30px 就当点击处理，避免用户想点按钮却触发了切换：
let startX = 0;
let endX = 0;
el.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
el.addEventListener('touchend', e => {
endX = e.touches[0].clientX;
const diff = startX - endX;
if (Math.abs(diff) > 30) {
if (diff > 0) nextSlide(); else prevSlide();
}
});
- 别在
touchmove里实时更新 UI 位移（太耗性能），只记起点终点就够了 - 记得在
touchstart里调用e.preventDefault()防止页面整体拖拽干扰 - iOS Safari 对
touch事件有延迟，加cursor: pointer到容器可提前激活
轮播图真正的难点不在“怎么动”，而在“什么时候不该动”——图片没加载完就切、触摸未结束就响应、定时器没清理干净……这些边界情况比动画本身更容易让页面失序。
