应动态计算图片宽度并用媒体查询适配，避免写死尺寸导致溢出或拉伸；轮播容器需 overflow: hidden；用 srcset + sizes 实现响应式图片；transition 与定时器须同步，手动切换时清除计时器并加防抖标志；触摸滑动需基于 deltaX 阈值吸附。
直接用 CSS 媒体查询 + transform: translateX() + 动态读取宽度，比硬写 300px 或依赖框架更可控、更少翻车。
为什么不能直接写死图片宽度或容器高度
写死宽度（比如 width: 1000px）会导致小屏溢出或留白；固定高度（如 height: 400px）在手机上会严重拉伸或裁切图片。关键不是“设多少”，而是“怎么随屏幕变”。
- 轮播容器必须设
overflow: hidden，否则滑动时边缘露出来 - 每张图的宽度应基于当前视口动态计算：
container.getBoundingClientRect().width，别用window.innerWidth—— 它包含滚动条宽度，且不响应缩放 - 背景图方案（
background-image）需配合background-size: cover和媒体查询切换高清/标清资源，但无法设置alt，对可访问性不友好
移动端图片资源怎么按屏幕密度自动切换
不用 JS 判断 devicePixelRatio，直接用 srcset + sizes 让浏览器自己选：
<img
src="slide_640x340.jpg"
srcset="slide_640x340.jpg 640w,
slide_1280x680.jpg 1280w,
slide_2000x410.jpg 2000w"
sizes="(max-width: 768px) 100vw, 2000px"
alt="活动主图"
>-
sizes告诉浏览器：“小屏下这张图占满 viewport 宽度，大屏下按 2000px 算” - 浏览器根据设备 DPR、网络条件、
sizes描述，自动选最合适的srcset资源 - 避免在 JS 里监听
resize后手动setAttribute('src', ...)—— 触发频繁重绘，且容易漏掉 DPR 变化（比如横竖屏切换）
transition 时间和 setInterval 间隔不匹配会抽搐
常见错误是把 CSS transition: transform 0.4s ease 和 JS setInterval(..., 3000) 当成两个独立配置，其实它们必须咬合。
立即学习“前端免费学习笔记（深入）”；
- 自动轮播节奏（3s） ≠ 单次动画耗时（0.4s），但下一次
setInterval触发前，必须确保上一次动画已结束 - 正确做法：在
transitionend回调里才更新currentIndex，并重置定时器；或统一用setTimeout替代setInterval，每次动画结束后再设下一轮 - 用户手动切换（点按钮或拖拽）后，要立刻
clearTimeout当前计时，否则动画还没完，新位移又来了，出现“闪回第一张” - 加个
isTransitioning标志位，防止 touchend 后还没松手就又触发一次切换
触摸滑动吸附逻辑怎么写才不卡顿
只靠 touchend 的 clientX 差值判断方向，会在斜滑时误判；不做吸附，图片常停在半路。
- 记录
touchstart的clientX，在touchend时算deltaX = endX - startX，忽略deltaY（除非你真要做二维轮播） - 设定最小触发阈值：
Math.abs(deltaX) 就不切换，直接回弹 - 吸附逻辑：若
deltaX > width * 0.3，切到下一张；若deltaX ，切到上一张；否则回弹到当前页 - 回弹必须用
transform+transition，别用 JS 逐帧requestAnimationFrame模拟，否则在低端机上掉帧
最易被忽略的是：所有状态同步必须原子化——currentIndex、translateX、指示点高亮、aria-current 属性，得在同一个函数里一并更新。分开改，哪怕只差几毫秒，用户连点两下就可能让索引和视觉彻底脱节。
