css要点

1. 外容器子绝父相,通过JS的offsetWidth设置wrapper的宽度
2. 焦点图的ul(500%)、li(20%)、img(100%)设置百分制的宽度，并且ul初始的时候要margin-left: -100%;
3. ul要手动清除浮动，因为li都float:left了，而ol里的li是通过display: inline-block;来使他一行显示的。

JS的要点

1. 注意什么时候添加动画效果（是否过渡/ 位移）
2. 添加transitionend事件——分类讨论是否是边界、小圆点的变化的classList的remove和add
3. 立个flag判断手指是否移动，新的touchstart事件（先清除定时器、e.targetTouches[0].pageX记录第一个手指的位置）、touchmove事件（flag为true、清掉过渡效果、transform动态设置位移、阻止滚动屏幕的行为e.preventDefault(); ）、touchend事件（加个过渡、判断是否换页）
4. 一开始有开启定时器、松开手指重新把定时器开回去

代码块

HTML部分

<div class="wrapper">
        <ul>
            <li><img src="./images/main-banner-06.jpg" alt=""></li>
            <li><img src="./images/main-banner-04.jpg" alt=""></li>
            <li><img src="./images/main-banner-05.jpg" alt=""></li>
            <li><img src="./images/main-banner-06.jpg" alt=""></li>
            <li><img src="./images/main-banner-04.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

css部分

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 44px;
}


/* 注意设置ul、li、img的width */

.wrapper img {
    width: 100%;
}

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

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

.wrapper ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.wrapper ol li {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .6);
    transition: all .3s;
}

.wrapper ol li.current {
    background-color: #fff;
}

JS部分

window.addEventListener('load', function() {
    // 1. 获取元素
    var wrapper = document.querySelector('.wrapper');
    var ul = wrapper.children[0];
    var ol = wrapper.children[1];
    // 获得wrapper的宽度
    var w = wrapper.offsetWidth;
    // 2. 利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translateX = -index * w;
        // 添加动画效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
    // 等着过渡完成之后，再去判断，监听过渡完成的事件transitionend
    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)';
        }
        // 3. 小圆点跟随变化
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });
    // 4. 手指滑动轮播图
    // 触摸元素touchstart：获取手指初始坐标
    var startX = 0;
    var moveX = 0; // 后面会使用这个移动距离，所以要定义为全局变量
    var flag = false; //用来标志手指是否真的移动，还是只是点击
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 手指触摸的时候就停止定时器
        clearInterval(timer);
    });
    // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove', function(e) {
        // 计算移动距离
        // e.targetTouches[0]为第一个手指，[1]表示第二个手指
        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) {
            //（1）如果移动距离大于100像素，则播放上一张或者下一张
            if (Math.abs(moveX) > 100) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var translateX = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            } else {
                //（2）如果移动距离小于100像素就回弹
                var translateX = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }
        }
        // 手指离开的时候就重新开启定时器
        timer = setInterval(function() {
            index++;
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    });
});