最稳妥的手写轮播图方案是用 transform: translateX() 配合 requestAnimationFrame 实现平滑过渡，结合 touchstart/move/end 精确处理拖拽与自动对齐，并在 touchend 后强制校准 currentIndex 以避免状态错位。
用 HTML + CSS + JavaScript 手写轮播图，不依赖框架
纯静态网页做轮播图，最稳妥的方式就是自己控制 transform: translateX() 和定时器。不需要引入 swiper 或 bootstrap，几行 JS 就能跑起来，关键是要避开自动切换卡顿、边界判断错乱、触摸中断失效这些坑。
- 所有图片必须放在同一个容器内，横向排列，宽度固定（推荐用
flex或inline-block） - 轮播容器设为
overflow: hidden，只显示一屏内容 - 用
setInterval触发位移，但每次移动前先清除上一个定时器，避免叠加 - 位移量 =
-currentIndex * slideWidth，currentIndex从 0 开始，最大值为slideCount - 1
touchstart / touchmove / touchend 实现手指滑动跟随
鼠标拖拽在桌面端可用 mousedown/mousemove/mouseup，但移动端必须用触控事件。重点不是“能动”，而是“松手后自动对齐最近一张”。常见错误是 touchmove 中直接改 transform 导致抖动，或没记录起始位置造成偏移错乱。
- 在
touchstart中记下touches[0].clientX作为startX -
touchmove里计算偏移差：currentX - startX，再加到基础位移上（临时效果） -
touchend时判断滑动距离是否超过阈值（如50px），超过则跳转下一张/上一张，否则回弹 - 注意：触发
touchmove后要调用event.preventDefault()，否则页面会跟着拖拽滚动
requestAnimationFrame 替代 setTimeout 做平滑过渡
用 setInterval 配合 transition 能实现切换，但手动滑动后立刻切图容易卡顿。真正顺滑的方案是把动画逻辑交给 requestAnimationFrame，自己算每一帧的位移进度。
- 切换开始时记录起始位置、目标位置、持续时间（如
300ms）和启动时间startTime = performance.now() - 在
raf回调中计算当前进度：progress = Math.min((now - startTime) / duration, 1) - 用缓动函数（如
cubic-bezier(0.25, 0.46, 0.45, 0.94)）调整 progress，再算出实时translateX - 这样即使用户中途又拖拽，也能立刻中断旧动画、启动新动画，不会堆叠
<div class="carousel">
<div class="carousel-track">
<img src="1.jpg" class="carousel-slide" alt="html5静态网页如何做轮播图_简单滑动效果实现【指南】" >
<img src="2.jpg" class="carousel-slide" alt="html5静态网页如何做轮播图_简单滑动效果实现【指南】" >
<img src="3.jpg" class="carousel-slide" alt="html5静态网页如何做轮播图_简单滑动效果实现【指南】" >
</div>
</div>
<p><script>
const track = document.querySelector('.carousel-track');
const slides = document.querySelectorAll('.carousel-slide');
const slideWidth = slides[0].offsetWidth;
let currentIndex = 0;
let isDragging = false;
let startX = 0;
let currentX = 0;</p><p>function moveTo(index) {
currentIndex = Math.max(0, Math.min(slides.length - 1, index));
track.style.transform = <code>translateX(${-currentIndex * slideWidth}px)</code>;
}</p><p>track.addEventListener('touchstart', e => {
isDragging = true;
startX = e.touches[0].clientX;
currentX = -currentIndex * slideWidth;
});</p><p>track.addEventListener('touchmove', e => {
if (!isDragging) return;
const diff = e.touches[0].clientX - startX;
track.style.transform = <code>translateX(${currentX + diff}px)</code>;
track.style.transition = 'none';
});</p><p>track.addEventListener('touchend', () => {
if (!isDragging) return;
isDragging = false;
const diff = -currentIndex * slideWidth - currentX;
if (Math.abs(diff) > 50) {
moveTo(diff > 0 ? currentIndex + 1 : currentIndex - 1);
} else {
moveTo(currentIndex);
}
track.style.transition = 'transform 0.3s ease';
});
</script></p>轮播图看似简单，最容易被忽略的是「触摸中断后的状态同步」——比如用户拖一半松手，此时 transform 值和 currentIndex 不一致，后续自动播放就会错位。每次 touchend 后务必重新校准 currentIndex，而不是只靠视觉位移。
立即学习“前端免费学习笔记（深入）”；
