本文介绍如何使用纯JavaScript结合CSS3 transition属性实现轻量级的移动端轮播图。核心思路是在自动播放和边界切换时使用transition动画，而在用户手指拖动时禁用动画以保证跟手性。代码不足100行，通过setTimeout处理无限循环的位置重置，适合对性能有要求的移动Web场景。
前言与核心逻辑
前言
此前曾探讨过利用tween算法实现ease-out缓动效果，相比之下，采用CSS3的transition属性来实现动画更为简洁高效。本文将详细解析这一实现方式的具体步骤与注意事项。
核心逻辑
实现的关键在于区分动画状态：在代码驱动移动距离时启用transition动画，而在用户手指触摸并拖动屏幕时，必须暂时移除transition属性，以确保拖拽操作的即时响应和流畅性。
该方案的优势在于代码极简，实现一个具备基本功能的轮播图，JavaScript代码量可控制在100行以内。
代码实现与注意事项
~function () {
var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移动的一点点距离
var movex = 0; // 记录手指move的x方向值
var imgWrap = document.getElementById('imgWrap');
var startX = 0; // 开始触摸时手指所在x坐标
var endX = 0; // 触摸结束时手指所在的x坐标位置
var imgSize = imgWrap.children.length - 2; // 图片个数
var t1 = 0; // 记录开始触摸的时刻
var t2 = 0; // 记录结束触摸的时刻
var width = window.innerWidth; // 当前窗口宽度
var nodeList = document.querySelectorAll('#imgWrap img'); // 所有轮播图节点数组 NodeList
// 给图片设置合适的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法
nodeList.forEach(function (node, index) {
node.style.left = (index - 1) * width + 'px';
});
/**
* 移动图片到当前的 tIndex索引所在位置
* @param {number} tIndex 要显示的图片的索引
* */
function toIndex(tIndex) {
var dis = -(tIndex * width);
// 动画移动
imgWrap.style.transform = 'translate3d(' + dis + 'px, 0, 0)';
imgWrap.style.transition = 'transform .2s ease-out';
movex = dis;
// 索引到最后一张图片, 迅速切换索引到同一张图的初始位置
setTimeout(function () {
if (tIndex === imgSize) {
imgWrap.style.transform = 'translate3d(0, 0, 0)';
imgWrap.style.transition = 'none';
movex = 0;
}
if (tIndex === -1) {
imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)';
imgWrap.style.transition = 'none';
movex = -width * (imgSize - 1);
}
}, 200);
}
/**
* 处理各种触摸事件 ,包括 touchstart, touchend, touchmove, touchcancel
* @param {Event} evt 回调函数中系统传回的 js 事件对象
* */
function touch(evt) {
var touch = evt.targetTouches[0];
var tar = evt.target;
var index = parseInt(tar.getAttribute('data-index'));
if (evt.type === 'touchmove') {
var di = parseInt(touch.pageX - lastPX);
endX = touch.pageX;
movex += di;
imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)';
imgWrap.style.transition = 'none'; // 移动时避免动画延迟
lastPX = touch.pageX;
}
if (evt.type === 'touchend') {
var minus = endX - startX;
t2 = new Date().getTime() - t1;
if (Math.abs(minus) > 0) { // 有拖动操作
if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖动距离不够,返回!
toIndex(index);
} else { // 超过一半,看方向
console.log(minus);
if (Math.abs(minus) < 20) {
console.log('距离很短' + minus);
toIndex(index);
return;
}
if (minus < 0) { // endX < startX,向左滑动,是下一张
toIndex(index + 1)
} else { // endX > startX ,向右滑动, 是上一张
toIndex(index - 1)
}
}
} else { //没有拖动操作
}
}
if (evt.type === 'touchstart') {
lastPX = touch.pageX;
startX = lastPX;
endX = startX;
t1 = new Date().getTime();
}
return false;
}
imgWrap.addEventListener('touchstart', touch, false);
imgWrap.addEventListener('touchmove', touch, false);
imgWrap.addEventListener('touchend', touch, false);
imgWrap.addEventListener('touchcancel', touch, false);
}(); 关键注意事项
当轮播图滑动至边界图片（即最后一张或第一张）时，不能立即切换回首尾相同的图片内容，否则会导致视觉闪烁。必须等待当前的切换动画完全结束后，再进行位置的无缝重置。
因此，实现中需借助setTimeout设置延迟，在动画执行完毕后再执行替换图片位置的操作，从而实现真正的无限循环播放效果。
至于HTML结构和CSS样式部分，可参考之前的文章：https://www.jb51.net/article/123303.htm，此处不再赘述。
总结
以上内容即为利用纯JS配合CSS3 Transition实现移动端轮播图的完整方案。希望本文能为您的学习或工作提供有价值的参考。如有任何疑问，欢迎留言交流，感谢支持。