纯手写轮播需用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 值残留导致错位。
响应式黑色展台设计整站模板，自带内核安装即用，图片文本实现可视化，方便修改，支持多种内容模型及自定义功能，可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
立即学习“前端免费学习笔记（深入）”；
- 所有状态变更（
currentIndex、isTransitioning）必须原子化，切换前先检查if (isTransitioning) return - 动画结束用
transitionend事件回调，而不是靠setTimeout猜时间 - 无限循环时，不要用
currentIndex = (currentIndex + 1) % length简单取模——当从最后一张切回第一张时，要先瞬移到最后一张右侧，再translateX到第一张位置，否则会反向闪一下 - 用
getBoundingClientRect()校验当前可视图是否真为预期索引，比单纯信currentIndex变量更可靠
轮播看着简单，但边界情况极多：页面缩放、横竖屏切换、服务端渲染 hydration 不一致、iOS Safari 的 transform 渲染 bug……真正稳定得把每种异常路径都写测试用例跑一遍。
