移动端js-css3，简易轮播图

移动端的轮播图和PC端差不多。

如下，有三张图需要轮播展示，为了流畅循环，当图3滑动到下一张图时，应当显示图1，当滑动完毕后，应当迅速直接跳转到第一张图1。

向前滑动同理

首先将所有图片放在一行（列），让ul的宽度为父元素（.nav）宽度的500%。让五张图的宽度为100%，让li的宽度为父元素（ul）的20%【因为此时ul宽度很宽，为20%刚好沾满整个nav】

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul {
        list-style: none;
    }
    img {
        vertical-align: top;
        width: 100%;
    }
    .nav {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .nav ul {
        width: 500%;
        overflow: hidden;
    }
    .nav ul li {
        width: 20%;
        float: left;
    }
    .nav ol {
        list-style: none;
        position: absolute;
        bottom: 45px;
        right: 5px;
    }
    .nav ol li {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #fff;
        border-radius: 2px;
        transition: all .3s;
    }
    .nav ol li.current {
        width: 15px;
    }
</style>
<div class="nav">
    <ul>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
    </ul>
    <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
    </ol>
</div>

一：JS代码结合css3 的transform，狠方便

<script>
//先做个定时器，反复让图片滑动到下一张。
    var nav = document.querySelector('.nav');
    var w = nav.clientWidth;
    var index = 0;
    index++;
    var ul = nav.querySelector('ul');
    var ol = nav.children[1];
    ul.style.transform = 'translateX(' + -w * index + 'px)';

    var timer = setInterval(() => {
        timeInterval();
    }, 2000);

    function timeInterval() {
        index++;
        ul.style.transition = "all .4s";
        ul.style.transform = 'translateX(' + -w * index + 'px)';
        console.log(index);
    }

//让ul添加一个动画结束的方法，每次动画滑动了一张图片后，
//处理一下小圆点和，动画超出图片的事情
//这里的动画结束触发的方法，会在ul每次触发transform后触发
    ul.addEventListener('transitionend', function() {
        //跳到最后一张图（也就是显示的是第一张图的最后一张图）
        //就让ul瞬间传送到第一张图
        if (index > 3) {
            index = 1;
            ul.style.transition = "none";
            ul.style.transform = 'translateX(' + -w * index + 'px)';
            console.log(index);
        }
        //跳到第一张图（也就是显示的是最后一张图的第一张图）
        //就让ul瞬间传送到最后一张图
        if (index < 1) {
            index = 3;
            ul.style.transition = "none";
            ul.style.transform = 'translateX(' + -w * index + 'px)';
            console.log(index);
        }
        // 处理小圆点
        // 移除当前的current
        ol.querySelector('li.current').classList.remove('current');
        // 根据index，让index-1，设置为current
        ol.children[index - 1].classList.add('current');
    })

// 因为是移动端，所有有一个特殊的事件，touch
    var startX = 0;
    var moveX = 0;
    ul.addEventListener('touchstart', function(e) {
        //手指杵上来必须先停掉定时器
        clearInterval(timer);
        startX = e.targetTouches[0].pageX; //第一根手指杵在了点的X坐标
        // imgX = parseInt(ul.style.transform.replace("translateX(", "")); //获取滚动图片的位置，X。这么获取有点sb，因为-index*w 就是这个值
    })
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX; //这是第一根手指移动的相对距离
        ul.style.transition = "none";
        ul.style.transform = 'translateX(' + (-index * w + moveX) + 'px)'; //需要让图片也移动相对距离
        e.preventDefault(); // 阻止滚动屏幕得行为
    })
    ul.addEventListener('touchend', function() {
        //通过手指移动的距离，判断应该跳转上一张还是下一张，移动的距离不够某个值就滑动回去
        if (moveX < -50) {
            //下一张
            index++;
        } else if (moveX > 50) {
            index--;
        }
        //这里不管手指移动了多少，都要进行滑动，有可能是回头，也有可能是继续。
        ul.style.transition = "all .2s";
        ul.style.transform = 'translateX(' + -w * index + 'px)';

        //松开手指，需要开启定时器
        timer = setInterval(() => {
            timeInterval();
        }, 2000);
    })
</script>