17370845950

纯手写轮播需用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，但仅对当前激活的轮播项生效，避免所有图都过渡

  
    @@##@@
    @@##@@
    @@##@@
  
  
  

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，就暂停自动播放。

• 给每张 加 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……真正稳定得把每种异常路径都写测试用例跑一遍