能实现触摸滑动切换图片。核心是touchstart记录起始clientX和索引，touchmove计算横向偏移并可选更新translateX，touchend依阈值（如>50px）判断方向切换图片，全程preventDefault避免默认行为干扰。
用 JavaScript 的触摸事件（touchstart、touchmove、touchend）配合位移计算，就能实现触摸滑动切换图片。核心是记录起始位置、跟踪滑动距离、判断方向与阈值后切换图片，同时避免默认滚动行为干扰。
监听触摸事件并禁用默认行为
在图片容器（如 <div id="slider">）上绑定三个关键事件，并调用 preventDefault() 阻止页面滚动或缩放干扰滑动体验：
-
touchstart：保存初始触摸的clientX坐标和当前图片索引 -
touchmove：实时计算横向滑动偏移量（currentX - startX），可选地更新容器 translateX 实现“跟随滑动”效果 -
touchend：根据最终偏移量判断是否满足切换条件（如 > 50px 向左滑切下一张，
用位移阈值控制切换逻辑
不能一有滑动就切换，需设定最小滑动距离（如 50px）和速度（可选），防止误触。示例判断逻辑：
- 若
deltaX > 50且为向右滑（即起点在右，终点更右 → 实际是想回退），则显示上一张图片 - 若
deltaX < -50且为向左滑，则显示下一张图片 - 切换后重置位置，恢复图片居中显示（例如通过 CSS
transform: translateX(0)）
结合 CSS 实现平滑过渡与定位
每张图片应放在一个宽度为 100% 的子容器内，整个画廊用 display: flex 或绝对定位排列。切换时修改外层容器的 transform: translateX(-n * 100%)，并添加 transition: transform 0.3s ease 实现动画。注意：
立即学习“Java免费学习笔记（深入）”；
- 确保容器设置
touch-action: pan-y pinch-zoom（禁止横向原生滚动，保留纵向滚动和缩放） - 图片容器需设
overflow: hidden，避免滑动时看到相邻图片 - 为提升响应，建议使用
passive: false选项注册 touch 事件（尤其在移动端）
处理边界与循环切换
当滑到首张或末张时，可选择停住、回弹，或启用循环模式（最后一张左滑回到第一张）。实现循环的关键是：
- 在切换前检查当前索引是否在边界
- 若启用循环且要切出边界，直接跳转到对端索引（如从最后一张左滑 → 索引设为 0）
- 配合 translateX 动画，视觉上无缝衔接（必要时可临时插入克隆图做过渡）
