纯手写轮播需用setInterval+transform:translateX()实现平滑切换，禁用left/margin-left防重排；支持touch手势并阻止默认滚动；用IntersectionObserver懒加载与控制可见性；严格管理状态防索引错乱。
用 HTML5 + CSS3 + JavaScript 实现基础轮播，不依赖框架
纯手写轮播最稳妥，尤其当项目不允许引入 swiper 或 bootstrap 时。核心是用 setInterval 控制切换，配合 transform: translateX() 做平滑位移，避免重排。注意别直接改 left 或 margin-left，否则会触发强制同步布局，卡顿明显。
- 轮播容器设为
overflow: hidden，子图用display: inline-block或float: left横向排列 - 每张图宽度必须固定（比如
100vw），否则translateX计算会偏移 - 自动播放前先检查
document.visibilityState === 'visible'，页面切到后台时暂停setInterval - 切换时加
transition: transform 0.4s ease-in-out，但仅对当前激活的轮播项生效，避免所有图都过渡
<div class="carousel">
<div class="carousel-track">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
</div>
<button class="prev"></button>
<button class="next"></button>
</div>
touchstart/move/end 手势支持必须手动绑定
移动端轮播没手势等于残废。不能只靠 click，得监听 touchstart 记下起始 clientX，touchmove 实时计算偏移，touchend 判断是否滑动足够距离（比如 >50px）再触发切换。关键点：要在 touchmove 里调用 event.preventDefault() 阻止默认滚动，否则手指一滑页面就跟着动了。
-
touchstart时保存event.touches[0].clientX -
touchmove时实时更新当前X，算出deltaX = currentX - startX，然后直接设transform: translateX(${offset + deltaX}px) -
touchend时若Math.abs(deltaX) > 50，则跳转下一张；否则回弹到原位置（用transition回退） - 记得在
touchstart后立即加touch-action: none到轮播容器，防浏览器误判为缩放或滚动
IntersectionObserver 替代定时器做懒加载与可见性控制
轮播图多的时候，全量加载图片很浪费带宽。用 IntersectionObserver 监听每张图是否进入视口，只在即将展示前才设置 src。同时它也能替代 visibilitychange 事件判断轮播是否在前台——只要观察器回调中 isIntersecting 为 false，就暂停自动播放。
- 给每张
<img alt="HTML5怎样实现图片轮播_HTML5实现图片轮播方式【展示】" >加data-src存真实地址，初始src留空或设占位图 - 初始化
IntersectionObserver时传{ rootMargin: '0px 0px 100px 0px' }，提前加载即将进入视口的图 - 回调里拿到
entries[0].isIntersecting，为true时赋值img.src = img.dataset.src，并observer.unobserve(img) - 轮播容器本身也作为目标被观察，
isIntersecting === false时clearInterval(timer)
轮播索引错乱、卡死、无限循环失效的常见原因
这些问题几乎都出在状态管理上。比如点击“下一张”后还没等动画结束又点一次，currentIndex 被加了两次；或者用 setTimeout 延迟重置 transform 但没清定时器，导致多个定时器叠加。更隐蔽的是：用 Array.prototype.map 渲染图片时，忘了给每项加唯一 key，React/Vue 会复用 DOM 节点，transform 值残留导致错位。
立即学习“前端免费学习笔记（深入）”；
- 所有状态变更（
currentIndex、isTransitioning）必须原子化，切换前先检查if (isTransitioning) return - 动画结束用
transitionend事件回调，而不是靠setTimeout猜时间 - 无限循环时，不要用
currentIndex = (currentIndex + 1) % length简单取模——当从最后一张切回第一张时，要先瞬移到最后一张右侧，再translateX到第一张位置，否则会反向闪一下 - 用
getBoundingClientRect()校验当前可视图是否真为预期索引，比单纯信currentIndex变量更可靠
轮播看着简单，但边界情况极多：页面缩放、横竖屏切换、服务端渲染 hydration 不一致、iOS Safari 的 transform 渲染 bug……真正稳定得把每种异常路径都写测试用例跑一遍。
