原生手搓，超丝滑手机端轮播组件

        <div class="silder">
            <ul>
                <li> <img src="upload/q70.jpg" alt=""></li>
                <li> <img src="upload/9b61768c6d5f1713.jpg!cr_1053x420_4_0!q70.jpg" alt=""></li>
                <li> <img src="upload/98fcafc1fc8e4385.jpg!cr_1053x420_4_0!q70.jpg" alt=""></li>
                <li> <img src="upload/q70.jpg" alt=""></li>
                <li> <img src="upload/98fcafc1fc8e4385.jpg!cr_1053x420_4_0!q70.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>


            </ol>
        </div>

 html部分

.silder {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.silder ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
}

.silder ul li {
    width: 20%;
    float: left;
}

.silder ul li img {
    width: 100%;
    height: 100%;
}

.silder ol {
    width: 100%;
    overflow: hidden;
    margin-top: 36%;
    z-index: 40;
    right: 12%;
    position: absolute;
    top: 0;
}

.silder ol li {
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(235, 235, 235, .5);
    float: right;
    margin-left: 10px;
    border-radius: 2px;
    transition: all .3s;
}

.silder ol .current {
    width: 25px;
    background-color: #cd2525;
}

css部分

 //超丝滑的手机端轮播，三千手搓---
    var silder = document.querySelector('.silder'); //
    var ul = silder.children[0];
    //获取silder的宽度；
    var w = silder.offsetWidth;
    var ol = silder.children[1];
    //定时器自动轮播
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    ul.addEventListener('transitionend', function() {
        //无缝滚动
        if (index >= 3) {
            index = 0;
            //去掉过度，返回起始位置
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';

        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        //小圆点
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    //手指触摸轮播
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;
        //移动盒子
        var translatex = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true; //手指移动过再去判断，否则不做判断---严谨写法
        e.preventDefault(); //阻止滚动的行为
    });
    ul.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                var translatex = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    })
});