移动端轮播图完成方法（附源码）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

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

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

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>

* { 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])   关键词：移动端轮播图完成办法（附源码）