本篇文章给大家带来的内容是关于移动端轮播图实现方法（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本文介绍在移动端无缝隙轮播图实现的原理，这个轮子比较简单，但可以方便刚刚入门的同学参考。最终效果是在移动端无缝隙无限滑动，可以自定义轮播的速度。支持手势左右滑动。最后会放上源码。
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...  源码在这里面，大家可以看一下。
以上就是移动端轮播图实现方法（附源码）的详细内容。