移动端轮播

移动端轮播

css代码

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .lunbo {
            position: relative;
            overflow: hidden;
        }

        .focus_img {
            width: 600%;
            margin-left: -100%;
        }

        .focus_img li {
            width: 16.666%;
            float: left;

        }

        .focus_img li img {
            width: 100%;
        }

        .list {
            position: absolute;
            border-radius: 5px;
            left: 20px;
            bottom: 10px;
            padding: 5px 0 0 10px;
            height: 15px;
            background-color: rgba(0, 0, 0, .3);
            cursor: pointer;
        }

        .list .current {
            background-color: orange;
        }

        .list li {
            float: left;
            height: 10px;
            width: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 10px;
        }
    </style>

html代码

   <div class="lunbo">
        <!-- 轮播图片 -->
        <ul class="focus_img">
            <li><img src="./images/04.webp" alt=""></li>
            <li><img src="./images/01.webp" alt=""></li>
            <li><img src="./images/02.webp" alt=""></li>
            <li><img src="./images/03.webp" alt=""></li>
            <li><img src="./images/04.webp" alt=""></li>
            <li><img src="./images/01.webp" alt=""></li>
        </ul>

        <!-- 底部导航 -->
        <ul class="list">
            <li class="current" data-index="0"></li>
            <li data-index="1"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
        </ul>
    </div>

js代码

        var focus = document.querySelector('.lunbo')
        var focus_img = document.querySelector('.focus_img')
        var list = document.querySelector('.list')

        //获取轮播图ul的宽度，也就是每次轮播图移动的距离
        var focusWidth = focus.offsetWidth
        //创建变量，用于轮播图的计数器
        var number = 0
        //创建变量，指示器的计数器
        var sort = 0
        //设置定时器，实现自动轮播 
        timer = setInterval(function () {
            number++
            //每次的移动距离
            var translateX = -number * focusWidth
            //元素设置过渡
            focus_img.style.transition = 'all 1s'
            focus_img.style.transform = 'TranslateX(' + translateX + 'px)'
            changeSort()
        }, 2000)


        //过渡事件结束会触发transitionend事件
        focus_img.addEventListener('transitionend', function () {
            if (number == 4) {
                number = 0
                //去除过渡
                focus_img.style.transition = 'none'
                focus_img.style.transform = 'TranslateX(0px)'
            } else if (number < 0) {
                number = 3
                var translatex = -number * focusWidth
                focus_img.style.transition = 'none'
                focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
            }

            //将节流阀变量设为true
            flag = true
            sort = number
            changeSort()
        })

        /*
         实现手指拖动轮播图
         1）手指触摸到元素上，停止轮播图自动播放
         2）判断手指的移动方向，然后让图片向这个方向移动
         3）判断手指的移动距离，如果超出一个范围，就切换轮播图；如果没有超出这个范围，则继续显示原理的轮播图
         */
        //声明变量，存储手指按下时的坐标
        startX = 0
        //声明变量，存储手指的移动距离
        moveX = 0
        var flag = true //设置节流阀，初始值为true
        focus_img.addEventListener('touchstart', function (e) {
            //获取手指按下时的位置
            startX = e.targetTouches[0].pageX
            //停止定时器
            clearInterval(timer)
            timer = null

        })
        focus_img.addEventListener('touchmove', function (e) {
            if (flag) {
                e.preventDefault()
                // 获取手指的移动距离 ：移动的手指坐标 - 初始 的手指坐标
                moveX = e.targetTouches[0].pageX - startX
                //计算focus_img的新坐标：原始位置 + 手指移动距离
                var translateX = -number * focusWidth + moveX
                this.style.transition = 'none'
                this.style.transform = 'TranslateX(' + translateX + 'px)'
            }
        })
        focus_img.addEventListener('touchend', function (e) {

            if (flag) {
                flag = false

                if (Math.abs(moveX) >= 50) {
                    if (moveX > 0) {
                        number--
                    } else {
                        number++
                    }
                    var translateX = -number * focusWidth
                    this.style.transition = 'all 1s'
                    this.style.transform = 'TranslateX(' + translateX + 'px)'
                } else {
                    //移动距离不超过50则在原来位置
                    var translateX = -number * focusWidth
                    this.style.transition = 'all .3s'
                    this.style.transform = 'TranslateX(' + translateX + 'px)'
                }
            }
            //清除定时器
            clearInterval(timer)
            //定时器自动定时轮播
            timer = setInterval(function () {
                number++
                //每次的移动距离
                var translateX = -number * focusWidth
                //元素设置过渡
                focus_img.style.transition = 'all 1s'
                focus_img.style.transform = 'TranslateX(' + translateX + 'px)'
            }, 3000)
        })
        /// 设置指示器的样式
        function changeSort() {
            for (i = 0; i < list.children.length; i++) {
                list.children[i].className = ''
            }
            // 设置对应指示器的样式
            list.children[sort].className = 'current'
        }

来源：CSDN

作者：仲冬壹拾肆

链接：https://blog.csdn.net/weixin_45740068/article/details/104511412