移动端轮播图

• 
• 
• 

<script>
    window.onload = function () {
        var wrap = document.querySelector('.wrap'); // 最外层的盒子
        var clientW = wrap.clientWidth; // 一张图片的宽度

        var list = wrap.querySelector('.list'); // list
        list.innerHTML += list.innerHTML; // 所有的子元素复制一份，做无缝轮播

        var span = wrap.querySelectorAll('.page span'); // 分页按钮
        var len = span.length * 2; // 图的个数，包含复制的图
        list.style.width = clientW * len + 'px'; // 给ul设置宽度

        var disX = 0; // 按下时，手指到可视区左边的距离
        var listLeft = 0; // 按下时，list的left值


        // 手指按下
        // 1、取得手指到可视区左边的距离，取得list的left值
        // 2、判断当前按下的是第几张图，如果第一张图，拉到下标为3的这张图。如果为最后一张，拉到下标为2的这张图
        list.addEventListener('touchstart', function (ev) {
            list.style.transition = 'none'; // 按下时，清除运动
            var e = ev.changedTouches[0]; // 手指的事件对象
            disX = e.pageX;
            listLeft = list.offsetLeft;

            var count = listLeft / clientW; // 返回的是0或者一个负数
            if (count === 0) {
                // 在第一张图按下
                count = span.length;
                list.style.left = -count * clientW + 'px';
                listLeft = list.offsetLeft;
            }
            if (-count === len - 1) {
                // 在最后一张图按下 瞬间回到第二张图
                count = span.length - 1;
                list.style.left = -count * clientW + 'px';
                listLeft = list.offsetLeft;
            }
        });

        // 手指移动
        list.addEventListener('touchmove', function (ev) {
            var e = ev.changedTouches[0]; // 手指的事件对象
            list.style.left = e.pageX - disX + listLeft + 'px';
        });

        // 手指抬起
        list.addEventListener('touchend', function () {
            var num = Math.round(list.offsetLeft / clientW); // 如果移动的超过一半，就到下一张，否则还在当前张
            // console.log(num);
            list.style.transition = 'all 0.4s';
            list.style.left = num * clientW + 'px';

            for (var i = 0; i < span.length; i++) {
                span[i].className = '';
            }
            span[-num % span.length].className = 'active';
        });
    }
</script>