移动端轮播图

核心原理
CSS
1、width：100%是指当前盒子占父盒子的100%；
2、图片盒子一定要加溢出隐藏，overflow: hidden；
JS
1、定时器自动轮播图片，使用CSS3的transition过渡动画；
2、开启transitionend 过渡完成事件；
3、当图片最后一张时则返回第一张，-1时则跳到最后一张；
4、开启touch事件，触摸事件；
touchstart：获取鼠标初始值；
touchmove：获取鼠标移动值；
touchend：当移动距离超过50时，从左往右 正值 上一张 --；从右往左 负值 下一张 ++；
HTML

    <div class="focus">
        <ul>
            <li><img src="./images/focus3.jpg" alt=""></li>
            <li><img src="./images/focus1.jpg" alt=""></li>
            <li><img src="./images/focus2.jpg" alt=""></li>
            <li><img src="./images/focus3.jpg" alt=""></li>
            <li><img src="./images/focus1.jpg" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

CSS

* {
    padding: 0;
    margin: 0;
}
.focus {
    position: relative;
    overflow: hidden;
}
.focus ul {
    width: 500%;
    margin-left: -100%;
    overflow: hidden;
}
.focus ul li {
    float: left;
    width: 20%;
}
.focus img {
    width: 100%;
}

.focus ol {
    position: absolute;
    right: 5px;
    bottom: 5px;
    margin: 0;
}
.focus ol li {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    list-style: none;
    border-radius: 2px;
    transition: all .3s;
}
.focus ol .current {
    width: 15px;
    background-color:tomato;
}

JS

window.addEventListener('load',function(){
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 获取图片的宽度
    var w = focus.offsetWidth;
    var ol = focus.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);

    // 监听事件 过渡完成
    focus.addEventListener('transitionend',function(){
        if(index >= 3){
            index = 0;
            var translatex = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if(index < 0) {
            index = 2;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 小圆点切换
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });

    // touch事件
    var startX = 0;
    var moveX = 0;
    var disX = 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;
        console.log('鼠标当前'+ moveX);
        console.log('鼠标初始'+startX);
        disX = moveX - startX;
        console.log('鼠标移动距离'+ disX);
        var translatex = -index * w + disX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true;
    });
    ul.addEventListener('touchend',function(e){
        if(flag){
           // math.abs() 取绝对值，当disXc大于50
           if(Math.abs(disX) > 50) {
            // 从左往右 正值 上一张 --；
            if(disX > 0) {
                index--;
            //从右往左 负值 下一张 ++； 
            } else {
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all 0.3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        };
        if(Math.abs(disX) < 50) {
            var translatex = -index * w;
            ul.style.transition = 'all 0.3s';
            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);
        }
    })
})