移动端轮播图实现方法（附源码）

来源：汇意旅游网

本篇文章给大家带来的内容是关于移动端轮播图实现方法（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

本文介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源码。

HTML部分

 <div class="outer" id="oneTest">
 <div class="inner">
 <div class="goIndex item" goUrl="https://www.baidu.com"
 style="background-image:url(1.jpg)"></div>
 <div class="goIndex item" goUrl="https://www.baidu.com"
 style="background-image:url(2.jpg)"></div>
 <div class="goIndex item" goUrl="https://www.baidu.com"
 style="background-image:url(3.jpg)"></div>
 </div>
 <ul class="num"></ul>
 </div>

轮播图的html就是这样，我们配合着css来看，接下来上css。

Css部分

 * {
 margin: 0;
 padding: 0;
 }
 ul {
 list-style: none;
 }
 .outer {
 margin: 0 auto;
 width: 100%;
 height: 150px;
 overflow: hidden;
 position: relative;
 }
 .inner {
 height: 150px;
 overflow: hidden;
 width: 8000px;
 }
 .inner .goIndex {
 float: left;
 height: 150px;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 }
 .num {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 20%;
 display: flex;
 justify-content: center;
 flex-direction: row;
 align-items: center;
 }
 .num li {
 margin: 0 3px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(0, 0, 0, .2);
 }
 .num li.select {
 background: rgba(0, 0, 0, .7);
 }

我们通过css可以看到，.outer为最外层的壳，超出的部分都会隐藏，.inner为一个很长很长的容器，而item为单个item。结构比较简单。ul就是小的控制点了，但移动端没有点击小点的功能。

页面中Js部分

 //function dGun(obj = {}) 这是dGun.js的主函数
 // 初始化两个图片轮播
 dGun({id:"oneTest",time:10000});
 dGun({id:"twoTest",time:4000});
 // 点击后跳转
 var goList = document.getElementsByClassName("goIndex");
 for (var i = 0; i < goList.length; i++) {
 goList[i].addEventListener("click", function () {
 window.location = this.getAttribute("goUrl")
 })
 }

dGun()就是初始化轮播图我们需要传入参数，第一个参数id为.outer盒子的id，第二个为自动切换时间。下面的是简单的点击跳转功能。

dGun.js 初始化部分

 //function dGun(obj = {}) 包裹全部dGun内代码
 var id = obj.id; //获取domid
 var time = obj.time ? parseInt(obj.time) : 3000; //默认3s
 time = time > 300 ? time : 1000; //间隔必须大于300
 var _width = document.querySelector("#"+id).offsetWidth; //获取轮播图宽度
 var _index = 0; //当前是第几个轮播 从-1开始
 var inner = document.querySelector("#"+id+" .inner"); //获取轮播内容外壳（很长的那个）
 var items = document.querySelectorAll("#"+id+" .item"); //获取轮播元素

 // 将第一个元素复制到最后，将最后的元素复制到开头
 var firstItem = items[0];
 var lastItem = items[items.length-1];
 inner.insertBefore(lastItem.cloneNode(true),firstItem);
 inner.appendChild(firstItem.cloneNode(true));
 inner.style.transform = "translateX(-"+_width+"px)";
 // 生成底部小圆点
 var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
 var makeCir = '<li class="select"></li>';
 for (var i = 0; i < imgLength - 1; i++) {
 makeCir += '<li></li>';
 }
 document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
 //设置轮播的宽度。
 var newItems = document.querySelectorAll("#"+id+" .item");
 for(var i = 0; i<newItems.length;i++){
 newItems[i].style.width = _width+"px";
 }

前几行代码就不多介绍了，就是获取dom，获取宽度。
这里说一下将第一个元素复制到最后，将最后的元素复制到开头，这是实现无缝隙的关键，比如我们有3张图片1/2/3进行轮播，这样我们就需要将dom节点变为3/1/2/3/1，为什么这样做呢，轮播图原理是多个item并列，我们通过translateX进行值的改变显示不同区域，我们先将dom节点变为3/1/2/3/1，然后通过inner.style.transform = "translateX(-"+_width+"px)";这句代码将初始化轮播显示区域放到1这个图片上。然后人们向右滑动，滑动到3的时候，再向右滑应该显示1，而我们dom节点中3的右边就是1，这样向右滑动到末尾1的时候我们快速通过translateX移动到开头1的位置来实现无缝隙轮播。

手势滑动实现

 var startX = 0, changedX = 0, originX = 0, basKey = 0;
 //手指点击的X位置 滑动改变X的位置 inner的translateX的值 basKey是个钥匙

 function Broadcast() {
 var that = this;
 this.box = document.querySelector("#"+id+" .inner");
 this.box.addEventListener("touchstart", function (ev) {
 that.fnStart(ev);
 })
 }

 // 轮播手指按下
 Broadcast.prototype.fnStart = function (ev) {
 clearInterval(autoPlay); //手指按下的时候清除定时轮播
 if (!basKey) {
 var that = this;
 startX = ev.targetTouches[0].clientX;
 var tempArr = window.getComputedStyle(inner).transform.split(",");
 //获取当前偏移量
 if (tempArr.length > 2) {
 originX = parseInt(tempArr[tempArr.length - 2]) || 0;
 }
 this.box.ontouchmove = function (ev) {
 that.fnMove(ev)
 }
 this.box.ontouchend = function (ev) {
 that.fnEnd(ev)
 }
 }
 };
 // 轮播手指移动
 Broadcast.prototype.fnMove = function (ev) {
 ev.preventDefault();
 changedX = ev.touches[0].clientX - startX;
 var changNum = (originX + changedX);
 this.box.style.cssText = "transform: translateX(" + changNum + "px);";
 };
 // 轮播手指抬起
 Broadcast.prototype.fnEnd = function (ev) {
 // 移除底部按钮样式
 document.querySelector("#"+id+" .select").classList.remove("select");
 basKey = 1;
 setTimeout(function () {
 basKey = 0;
 }, 300)
 if (changedX >= 100) { //向某一方向滑动
 var _end = (originX + _width);
 this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
 _index--;
 if (_index == -1) { //滑动到第一个了，为了实现无缝隙，滚到最后去
 document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
 play(-1);
 }
 } else if (changedX < -100) { //向负的某一方向滑动
 var _end = (originX - _width);
 this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
 _index++;
 if (_index == imgLength) { //滑到最后一个了，为了实现无缝隙，滚到前面去
 play(imgLength);
 document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
 }
 } else { //滑动距离太短，没吃饭不用管
 this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
 }
 // 完成一次滑动初始化值
 startX = 0;
 changedX = 0;
 originX = 0;
 if (_index != -1 && _index != imgLength) {
 document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
 }
 this.box.ontouchmove = null; //清除事件
 this.box.ontouchend = null; //清除绑定事件
 autoPlay = setInterval(lunbo, time) //开启轮播
 }

我们定义Broadcast方法监听用户的触屏按下事件
当手指按下时，我么记录手指按下的X轴位置，单后进行监听移动和抬起的事件。
手指移动的时候我们要做到就是计算偏移量，并通过偏移量改变inner的位置。
手指抬起时，我们查看偏移量十分大于100，这个值可以改，也可以改一下变成传参。通过正负判断方向，并通过index判断当前是第几个，如果是滑动到我们复制的第一个和最后一个节点，则执行play函数，我们接下来讲解。然后改变控制点样式就比较简单了，最后初始化值，并清除监听事件。

play函数，快速滚

 //首尾无缝连接
 function play(index) {
 setTimeout(function () {
 inner.style.transition = 'all 0s';
 if (index == -1) {
 var _number = -imgLength * _width;
 inner.style.transform = 'translateX(' + _number + 'px)';
 _index = imgLength - 1;
 } else if (index == imgLength) {
 inner.style.transform = 'translateX(-' + _width + 'px)';
 _index = 0;
 }
 }, 250);
 }

原理就是在图片滑动完成的时候，快速设置滑动变化时间设为0，并改变translateX到应该去的位置。

定时切换图片

 function lunbo(){
 document.querySelector("#"+id+" .select").classList.remove("select");
 var tempArr = window.getComputedStyle(inner).transform.split(",");
 if (tempArr.length > 2) {
 originX = parseInt(tempArr[tempArr.length - 2]) || 0;
 }
 var _end = (originX - _width);
 inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
 _index++;
 if (_index != -1 && _index != imgLength) {
 document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
 }else if(_index == -1 ){
 document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
 } else if (_index == imgLength) {
 play(imgLength);
 document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
 }
 }
 // 初始化轮播
 var autoPlay = setInterval(lunbo,time); //开启轮播
 var _Broadcast = new Broadcast(); //实例触摸

这个就是开启个定时器，过固定的时间偏移inner的X，并根据是第几个来判断是否要执行play函数。

https://github.com/Zhoujiando... 源码在这里面，大家可以看一下。