js移动端轮播图

最新推荐文章于 2023-06-04 16:00:52 发布

靠技术吃饭

最新推荐文章于 2023-06-04 16:00:52 发布

阅读量478

点赞数 23

分类专栏： BOM JavaScript HTML5 文章标签： html5 前端 bom dom

本文链接：https://blog.csdn.net/weixin_58131487/article/details/121236393

版权

JavaScript 同时被 3 个专栏收录

29 篇文章 6 订阅

订阅专栏

HTML5

26 篇文章 1 订阅

订阅专栏

BOM

8 篇文章 1 订阅

订阅专栏

案例分析

实现代码

做完PC端的轮播图以后，怎么能不尝试一下移动端呢，也不像我的风格，来来来，格局打开，往下看！！！

移动端轮播图功能和基本PC端一致。

可以自动播放图片

手指可以拖动播放轮播图

做好多的效果图如下图所示：

案例分析

第一步：

自动播放功能

开启定时器

移动端移动，可以使用translate 移动

想要图片优雅的移动，请添加过渡效果

第二步：

自动播放功能-无缝滚动

注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断

此时需要添加检测过渡完成事件 transitionend

判断条件：如果索引号等于 3 说明走到最后一张图片，此时索引号要复原为 0

此时图片，去掉过渡效果，然后移动

如果索引号小于0，说明是倒着走，索引号等于2

此时图片，去掉过渡效果，然后移动

第三步：

小圆点跟随变化效果

把ol里面li带有current类名的选出来去掉类名 remove

让当前索引号的小li 加上 current add

但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面

第四步：

手指滑动轮播图

本质就是ul跟随手指移动，简单说就是移动端拖动元素

触摸元素touchstart：获取手指初始坐标

移动手指touchmove：计算手指的滑动距离，并且移动盒子

离开手指touchend: 根据滑动的距离分不同的情况

如果移动距离小于某个像素就回弹原来位置

如果移动距离大于某个像素就上一张下一张滑动。

滑动也分为左滑动和右滑动判断的标准是移动距离正负如果是负值就是左滑反之右滑

如果是左滑就播放下一张（index++）

如果是右滑就播放上一张 (index--)

实现代码

html 文件里面写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <style>
        
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            background-color: #F2F2F2;
        }
        .box {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 300px;
        }

        ul {
            overflow: hidden;
            margin-left: -100%;
            width: 500%;
        } 
        ul li {
            float: left;
            width: 20%;
        }
        
        img {
            width: 100%;
            height: 300px
        }
        ol {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        ol li {
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: red;
            border-radius: 4px;
            transition: all .1s;
        }
        
        .color {
            width: 20px;
        }
    </style>
    <script src="17-移动轮播图.js"></script>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/33.webp" alt=""></li>
            <li><img src="images/11.webp" alt=""></li>
            <li><img src="images/22.webp" alt=""></li>
            <li><img src="images/33.webp" alt=""></li>
            <li><img src="images/11.webp" alt=""></li>
        </ul>
        <ol>
            <li class="color"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>

js 文件里面的代码如下：

window.addEventListener('load', function () {
    var box = document.querySelector('.box');
    var ul = box.children[0];
    var ol = box.children[1];
    var w = box.offsetWidth;
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all 1s'
        ul.style.transform = 'translateX(' + translatex + 'px)'
    }, 2000)
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            // 利用最新索引号乘以宽度，去滚动图片
            var translatex = -index * w;
            // 去掉过渡效果，这样我们的ul 快速跳到目标位置
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
        if (index < 0) {
            index = 2;
            // 利用最新索引号乘以宽度，去滚动图片
            var translatex = -index * w;
            // 去掉过渡效果，这样我们的ul 快速跳到目标位置
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 小圆点随图片变化，在过渡完成以后变化
        // 把ol里面带有color 类名的选出来去掉类名
        ol.querySelector('.color').classList.remove('color');
        // 让当前索引号的小li 加上 color 类
        ol.children[index].classList.add('color');
    })
    // 手指滑动轮播图
    // 触摸元素 ,获取手指初始坐标
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        // 鼠标拖动的时候不需要定时器 
        clearInterval(timer);
    })
    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 () {
        // 如果移动过了,再判断是否左滑右滑
        if (flag) {
            // (1)如果移动距离大于50像素我们就播放上一张下一张
        if (Math.abs(moveX) > 50) {
            // 右滑,播放上一张,moveX 是正值
            if (moveX > 0) {
                index--;
            } else {
                // 左滑,播放下一张,moveX 是负值
                index++;
            }
            var translatex = -index * w;
            ul.style.transition = 'all .1s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else {
            // (2)如果移动距离小于 50 像素我们就回弹
            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 1s'
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }, 2000)
    })
})