js移动端图片自动轮播插件

js代码

//清楚浏览器的默认行为
    document.addEventListener('touchstart', function (e) {
        e.preventDefault();
    });
    window.onload = function () {
        var wrap = document.querySelector('#wrap');
        var box = document.querySelector('#box');
        box.innerHTML += box.innerHTML;
        var alis = document.querySelectorAll('#box li');
        var spans = document.querySelectorAll('#nav span');
        //console.log(spans);
        //样式初始化
        styleInt();

        moveIng();

        function styleInt() {
            box.style.width = 100 * alis.length + '%';
            wrap.style.height = alis[0].offsetHeight + 'px';
            for (var i = 0; i < alis.length; i++) {
                alis[i].style.width = 100 / alis.length + '%';
            }
        }

        function moveIng() {
            var startPoint, endPoint;
            var Len;
            var startX = 0;
            var transX = 0;
            var now = 0;
            var timer = 0;
            spans[now].className = 'active';
            //自动轮播
            autoTab();
            //手指按下
            box.addEventListener('touchstart', function (e) {
                clearInterval(timer);
                startPoint = e.changedTouches[0].pageX;
                now = Math.round(-transX / wrap.offsetWidth);
                if (now == 0) {
                    now = spans.length;
                }
                if (now >= alis.length - 1) {
                    now = spans.length - 1;
                }
                transX = -now * wrap.offsetWidth;
                box.style.transform = 'translateX(' + transX + 'px)';
                startX = transX;
            });
            //手指移动
            box.addEventListener('touchmove', function (e) {
                clearInterval(timer);
                endPoint = e.changedTouches[0].pageX;
                Len = endPoint - startPoint;
                transX = startX + Len;
                box.style.transition = 'none';
                box.style.transform = 'translateX(' + transX + 'px)';
            });
            //手指离开
            box.addEventListener('touchend', function () {
                now = Math.round(-transX / wrap.offsetWidth);
                tab();
                autoTab();
            });

            function tab() {
                box.style.transition = 'all 0.2s';
                box.style.transform = 'translateX(' + (-now * wrap.offsetWidth) + 'px)';
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = '';
                }
                spans[now % spans.length].className = 'active';
            };
            //自动轮播
            function autoTab() {
                clearInterval(timer);
                timer = setInterval(function () {

                    if (now == 0) {
                        now = spans.length;
                    }
                    if (now == alis.length - 1) {
                        now = spans.length - 1;
                    }
                    box.style.transition = 'none';
                    box.style.transform = 'translateX(' + (-now * wrap.offsetWidth) + 'px)';
                    setTimeout(function () {
                        now++;
                        tab();
                    }, 30)

                }, 1000)
            }
        }

    }