移动端web轮播图，包括触摸左右滑动切换效果

不念不忘少年蓝@ 2021-10-29 11:28 347阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
        <title>Title</title>
    </head>
    <style>
        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        body{
            background-color:#f5f5f5 ;
        }
        .banner{
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        .banner ul:first-child{
            width: 1000%;
            transform: translateX(-10%);
            -webkit-transform: translateX(-10%);
        }
        .banner ul li{
            float: left;
            width: 10%;
        }
        .banner ul li a{
            display: block;
            width: 100%;
        }
        .banner ul li img{
            display: block;
            width: 100%;
        }
        .banner ul:last-child{
            position: absolute;
            width: 118px;
            height: 6px;
            left: 50%;
            margin-left:-59px;
            bottom: 6px;
        }
        .banner ul:last-child li{
            width: 6px;
            height: 6px;
            border-radius: 3px;
            border: 1px solid #fff;
            margin-left:10px;
            float: left;
        }
        .banner ul:last-child li:first-child{
            margin-left: 0;
        }
        .banner ul:last-child .now{
            background: #fff;
        }
    </style>
    <body>
        
        <div class="banner">
            <ul>
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
    <script>
        window.onload = function () {
        banner();
        };
        var banner = function () {
            /*1. 自动轮播图且无缝   定时器，过渡*/
            /*2. 点要随着图片的轮播改变  根据索引切换*/
            /*3. 滑动效果  利用touch事件完成*/
            /*4. 滑动结束的时候    如果滑动的距离不超过屏幕的1/3  吸附回去   过渡*/
            /*5. 滑动结束的时候    如果滑动的距离超过屏幕的1/3  切换（上一张，下一张）根据滑动的方向，过渡*/
    	    /*轮播图*/
            var banner = document.querySelector('.banner');
            /*屏幕宽度*/
            var width = banner.offsetWidth;
            /*图片容器*/
            var imageBox = banner.querySelector('ul:first-child');
            /*点容器*/
            var pointBox = banner.querySelector('ul:last-child');
            /*所有的点*/
            var points = pointBox.querySelectorAll('li');
            var addTransition = function () {
                imageBox.style.transition = 'all 0.2s';
                imageBox.style.webkitTransition = 'all 0.2s';
            }
            var removeTransition = function () {
                imageBox.style.transition = 'none';
                imageBox.style.webkitTransition = 'none';
            }
            var setTranslateX = function (translateX) {
                imageBox.style.transform = 'translateX(' + translateX + 'px)';
                imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
            }
            /*程序的核心 index */
            var index = 1;
            var timer = setInterval(function () {
                index++;
                /*加过渡*/
                addTransition();
                /*做位移*/
                setTranslateX(-index * width);
            }, 1000);
            /*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
            imageBox.addEventListener('transitionend', function () {
                /*自动滚动的无缝*/
                if (index >= 9) {
                    index = 1;
                    /*瞬间定位*/
                    /*清过渡*/
                    removeTransition();
                    /*做位移*/
                    setTranslateX(-index * width);
                }
                /*滑动的时候也需要无缝*/
                else if (index <= 0) {
                    index = 8;
                    /*瞬间定位*/
                    /*清过渡*/
                    removeTransition();
                    /*做位移*/
                    setTranslateX(-index * width);
                }
                /*根据索引设置点*/
                /*此时此刻  index  的取值范围  1-8（0,8--1,9）*/
                /*点索引  index - 1 */
                setPoint();
            });
            /*设置点的方法*/
            var setPoint = function () {
                /*index 1-8*/
                /*清除样式*/
                for (var i = 0; i < points.length; i++) {
                    var obj = points[i];
                    obj.classList.remove('now');
                }
                /*给对应的加上样式*/
                points[index - 1].classList.add('now');
            }
            /*绑定事件*/
            var startX = 0;
            var distanceX = 0;
            var isMove = false;
            banner.addEventListener('touchstart', function (e) {
                /*清除定时器*/
                clearInterval(timer);
                /*记录起始位置的X坐标*/
                startX = e.touches[0].clientX;
            });
            banner.addEventListener('touchmove', function (e) {
                /*记录滑动过程当中的X坐标*/
                var moveX = e.touches[0].clientX;
                /*计算位移  有正负方向*/
                distanceX = moveX - startX;
                /*计算目标元素的位移  不用管正负*/
                /*元素将要的定位=当前定位+手指移动的距离*/
                var translateX = -index * width + distanceX;
                /*滑动--->元素随着手指的滑动做位置的改变*/
                removeTransition();
                setTranslateX(translateX);
                isMove = true;
            });
            banner.addEventListener('touchend', function (e) {
                /*4.  5.  实现*/
                /*要使用移动的距离*/
                if (isMove) {
                    if (Math.abs(distanceX) < width / 3) {
                        /*吸附*/
                        addTransition();
                        setTranslateX(-index * width);
                    } else {
                        /*切换*/
                        /*右滑动 上一张*/
                        if (distanceX > 0) {
                            index--;
                        }
                        /*左滑动 下一张*/
                        else {
                            index++;
                        }
                        /*根据index去动画的移动*/
                        addTransition();
                        setTranslateX(-index * width);
                    }
                }
                /*最好做一次参数的重置*/
                startX = 0;
                distanceX = 0;
                isMove = false;
                /*加上定时器*/
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    /*加过渡*/
                    addTransition();
                    /*做位移*/
                    setTranslateX(-index * width);
                }, 1000);
            });
        }
    </script>
    </html>