Web移动端html+css+js实现轮播图

解读在代码注释里面，如果看不懂或者不理解，可以评论区留言或私信我

网页布局部分：

<div class="focus">

        <ul>

            <li><img src="./images/myq1.jpg" alt=""></li>

            <li><img src="./images/myq1.jpg" alt=""></li>

            <li><img src="./images/myq1.jpg" alt=""></li>

            <li><img src="./images/myq1.jpg" alt=""></li>

            <li><img src="./images/myq1.jpg" alt=""></li>

        </ul>

        <!-- 圆点 -->

        <ol>

            <li class="current"></li>

            <li></li>

            <li></li>

        </ol>

    </div>

 

---

 

CSS布局部分：

.focus {

    position: relative;

    padding-top: 44px;

    overflow: hidden;

}

.focus img{

    width: 100%;

}

.focus ul {

    overflow: hidden;

    width: 500%;

    margin-left: -100%;  

}

.focus ul li {

    float: left;

    width: 20%;

}

.focus ol {

    position: absolute;

    bottom: 5px;

    right: 5px;

}

.focus ol li {

    display: inline-block;

    width: 5px;

    height: 5px;

    background-color: #fff;

    list-style: none;

    border-radius: 2px;

    transition: all .3s;

}

.focus ol li.current {

    width: 15px;

}

---

JS部分： 

//等待网页加载完以后再开始处理轮播图

window.addEventListener('load', function () {

    var focus = document.querySelector('.focus');

    var ul = focus.children[0];

    var w = focus.offsetWidth;

    var ol = focus.children[1];

    var index = 0;

//添加定时器

    var timer = setInterval(function () {

        index++;

        var translatex = -index * w;

//C3缓动动画效果

        ul.style.transition = 'all .3s';

        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000);

    //无缝衔接应该等到过渡完成之后， 再去判断  监听过度完成事件 transitionend

    ul.addEventListener('transitionend', function () {

        if (index >= ul.children.length - 2) {

            index = 0;

            //去掉过渡效果 让ul快速跳到目标效果

            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)';

        }

        //小圆点跟随变化效果

        //1.把ol里面带有current 类名的选出来 去掉

        ol.querySelector('li.current').classList.remove('current');

        //2.让当前索引号的li加上current

        ol.children[index].classList.add('current');

    })

    //手指滑动轮播图

    //触摸元素 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) {

        //计算移动距离

        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) 如果移动距离大于50像素就播放上一张或下一张

            if (Math.abs(moveX) > 50) {

                //如果是右滑就播放上一张 moveX 是正值

                if (moveX > 0) {

                    index--;

                //如果是左滑就播放下一张 moveX 是负值

                } else {

                    index++;

                }

                var translatex = -index * w;

                ul.style.transition = 'all .3s';

                ul.style.transform = 'translateX(' + translatex + 'px)';

                //如果小于50像素就回弹

            } 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);

    })

})

---

生命不息，学习不止，键盘敲烂，月薪过万！加油，代码人！