本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码，供大家参考，具体内容如下

移动端手势

轮播图分析

1、自动轮播且无缝 [定时器、过渡动画]
2、分页器要随着图片的轮播而改变 [根据索引切换]
3、滑动效果 [touch事件]
4、图片随着分页器变化
5、滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡]
6、滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]]

html页面结构

<!--轮播图--> <div class="jd_banner"> <ul class="clearfix"> <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l2.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l3.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l4.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l5.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l6.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l7.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l8.jpg" alt=""></a></li> <li><a href="#" ><img src="images/l1.jpg" alt=""></a></li> </ul> <ul class="clearfix"> <li class="now"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>

js部分

var addTransition = function (ele) { ele.style.transition = "all .6s"; ele.style.webkitTransition = "all .6s";};var removeTransition = function (ele) { ele.style.transition = "none"; ele.style.webkitTransition = "none";};var setTranslateX = function (ele, xwidth) { ele.style.transform = "translateX(" + xwidth + "px)"; ele.style.webkitTransform = "translateX(" + xwidth + "px)";}var banner = function () { /** 轮播图分析 */ /** 1 自动轮播且无缝 [定时器、过渡动画] * 2 点要随着图片的轮播而改变 [根据索引切换] * 3 滑动效果 [touch事件] * 4 图片随着点而变化 * 5 滑动结束的时候，如果滑动的距离不超过屏幕的1/3，就恢复回去 [过渡] * 6 滑动结束的时候，如果滑动的距离超过屏幕的1/3，就切换 [滑动方向 + 过渡]] */ var timer = '' var startInterval = function () { timer = setInterval(function () { index++;// 基于索引 做位移 addTransition(imgBox); // 为轮播图片组的ul设置过渡函数 setTranslateX(imgBox, -index * width);// 根据当前索引值计算平移的距离 }, 2000); } var banner = document.querySelector(".jd_banner"); var width = banner.offsetWidth; // 屏幕的宽度 var imgBox = banner.querySelector("ul:first-child"); // 轮播图片ul var length = imgBox.querySelectorAll("li").length; // 图片的个数 var pointBox = banner.querySelector("ul:last-child");// 分页器ul var points = pointBox.querySelectorAll("li");// 分页器集合 var index = 1; // 初始化索引，由于要无缝衔接，索引从1开始 startInterval(); imgBox.addEventListener("transitionend", function () { if (index >= length - 1) { index = 1; // 清过渡，瞬间定位imgBox removeTransition(imgBox); setTranslateX(imgBox, -index * width); } // 滑动的时候也需要无缝 else if (index <= 0) { index = 8; removeTransition(imgBox); setTranslateX(imgBox, -index * width); } showPoint(index - 1); // 改变分页器状态 }); var showPoint = function (index) { for (var i = 0; i < points.length; i++) { points[i].className = ''; } points[index].className = "now"; }; var startX = 0; // 触摸起始点 imgBox.addEventListener("touchstart", function (e) { // 记录起始位置的X坐标 clearInterval(timer); startX = e.touches[0].clientX; }); var distanceX = 0; var translateX = 0; // **** 加一个标识，判断用户有没有滑动 var isMove = false imgBox.addEventListener("touchmove", function (e) { var moveX = e.touches[0].clientX; // 计算位移,有正负方向 distanceX = moveX - startX; // 计算目标元素的位移 // 元素将要的定位 = 当前定位 + 手指移动的距离 translateX = -index * width + distanceX; // ********** 要想图片实时地跟着手指走，一定要把过渡清楚掉 removeTransition(imgBox) setTranslateX(imgBox, translateX); isMove = true;// 确定用户有滑动 e.preventDefault(); // 去除移动端浏览器默认的滑动事件 }); imgBox.addEventListener("touchend", function (e) { if (isMove) { if (Math.abs(distanceX) > width / 3) { // 切换 if (distanceX > 0) { // 上一张 index = index - 1; } else { // 下一张 index = index + 1; } addTransition(imgBox); // 设置过渡动画 setTranslateX(imgBox, -index * width); if (index >= 9) { index = 1; } if (index <= 0) { index = 8; } showPoint(index - 1); } else { // 不满足滑动条件，回退到之前的状态 addTransition(imgBox); setTranslateX(imgBox, -index * width); showPoint(index - 1); } } // **** 最好做一次参数的重置 startX = 0; distanceX = 0; isMove = false; // ****** 为了严谨，再清一次定时器 clearInterval(timer) // 加上定时器 startInterval(); });};

总结

原生js实现滑动切换的原理主要还是利用移动端的手势事件

• touchstart 当手指触摸屏幕时触发
• touchmove 当手指在屏幕中滑动的时候触发
• touchend 当手指离开屏幕时触发

利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件。

而swiper插件的底层实现原理也是这个，因此，为了快速开发，还是使用swiper插件最好

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。