通栏焦点图无需jquery插件即可稳定运行，关键在于html结构清晰、css用overflow:hidden裁剪容器并设position:relative、js仅控制索引与class切换；图片须用transform:translatex()替代left实现gpu加速，配合cubic-bezier过渡、pointerenter/leave暂停、延迟启动及width:100%;height:auto;响应式控制。
通栏焦点图（即宽度 100%、高度自适应或固定、横跨整个视口的 Banner 轮播）不需要依赖 jQuery 插件也能稳定运行，关键在于 DOM 结构清晰、CSS 控制尺寸与隐藏逻辑合理、JS 只管索引切换和 class 切换——否则容易在 Safari 或旧版 Edge 上卡顿、失焦或错位。
HTML 结构必须用 overflow: hidden 包裹容器
很多通栏轮播出问题，不是 JS 写错了，而是外层容器没加 overflow: hidden。图片横向排列时，若父容器不裁剪溢出，滚动条可能意外出现，或在 iOS Safari 中触发弹性拖拽干扰自动轮播。
<div class="slider"> 必须设 <code>position: relative和overflow: hidden- 内部
<div class="slides"> 宽度要设为 <code>width: 100% * 图片数量（例如 3 张图就写width: 300%），且用display: flex或white-space: nowrap防止换行 - 每张图用
<img>直接加载，不要套<li>或<figure></figure>增加嵌套层级——除非你明确需要语义化或 SEO 加权 - 每次切换时只改
transform: translateX(-${currentIndex * 100}%)，不要操作left或margin-left - 务必加上
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)——这个贝塞尔曲线比ease-in-out更顺滑，尤其适合大图过渡 - 避免在
transform同时设置opacity动画，否则部分 Android 机型会掉帧 - 用
addEventListener('pointerenter')和pointerleave替代mouseenter，兼容鼠标+触控笔+手指 - 暂停时调用
clearInterval(timer)，恢复时重新timer = setInterval(...)，不要复用旧 timer ID - 首次加载后延时 3s 再启动轮播（
setTimeout(() => { startAutoPlay() }, 3000)），避免页面未渲染完就切图导致白屏 - 所有图片统一设
width: 100%; height: auto;，靠父容器控制实际尺寸 - 如果需要固定高宽比（如 16:9），用
aspect-ratio: 16 / 9（现代浏览器）或伪元素 padding-bottom hack（兼容 IE11） - 背景图方案更可控：
background-image: url(...); background-size: cover;，但需注意 SEO 和 alt 文本缺失问题
transform: translateX() 比 left 更稳
用 left + position: absolute 切换通栏图，在 Chrome 低版本或安卓 WebView 中可能出现重绘延迟、闪帧；transform 触发 GPU 加速，且不影响文档流，是当前最可靠方案。
自动轮播必须监听鼠标悬停暂停
通栏焦点图默认自动播放，但用户把鼠标停在上面时继续切图，体验极差。仅靠 mouseenter/mouseleave 不够：触摸设备没 hover，且快速进出可能触发多次 clearInterval 导致计时器混乱。
图片宽高必须用 CSS 控制，不能靠 width/height 属性
通栏图常见错误：给 <img src="..." style="max-width:90%" style="max-width:90%">，结果在小屏上被拉伸变形，或高清屏下模糊。HTML 属性宽高会强制缩放像素，破坏响应性。
通栏焦点图真正的难点不在切换逻辑，而在尺寸适配和交互节奏的平衡——比如自动轮播间隔设成 5s 还是 4s，取决于文案停留可读时间；transform 的 timing function 微调 0.02，视觉流畅度差异就很明显。这些细节没标准答案，只能靠真机多测。
