JavaScript 移动端轮播图效果

最新推荐文章于 2024-09-06 09:22:32 发布

火星飞鸟

最新推荐文章于 2024-09-06 09:22:32 发布

阅读量463

点赞数 1

分类专栏： JavaScript 前端基础文章标签： javascript

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109317865

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

JavaScript

88 篇文章 1 订阅

订阅专栏

代码实现：

注意：在Chrome浏览器中切换到移动端页面查看。
在这里插入图片描述

mobileAutoPlay.html（复制并保存为html文件，打开并切换为移动端显示，即可见效果）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/normalize.css">
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.css">
    <script src="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.js"></script>
</head>

<body>
    <!-- 焦点图 -->
    <div class="focus">
        <ul>
            <li>
                <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="">
            </li>
            <li>
                <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="">
            </li>
            <li>
                <img src="https://s1.ax1x.com/2020/10/22/Bi1erF.md.jpg" alt="">
            </li>
            <li>
                <img src="https://s1.ax1x.com/2020/10/22/Bi1ZKU.jpg" alt="">
            </li>
            <li>
                <img src="https://s1.ax1x.com/2020/10/22/Bi1mb4.jpg" alt="">
            </li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

</html>

mobileAutoPlay.css：

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

div {
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #222;
}

.focus {
    overflow: hidden;
    position: relative;
    margin-top: 44px;
}

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

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

.focus img {
    width: 100%;
}

.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    list-style: none;
    border-radius: 4px;
    transition: all .3s;
    margin-left: 1px;
}

.focus ol .current {
    width: 15px;
}

mobileAutoPlay.js：

window.addEventListener('load', function() {
    // 1. 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    // 获取focus的宽度
    var w = focus.offsetWidth;
    var ol = focus.children[1];

    // 2. 定时器轮播图片
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 1000);

    // 等过渡完成后再判断
    ul.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index >= 3) {
            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)';
        }
        // 3.小圆点跟随变化
        // ol中的li带有current类型的选出来，删除类名
        ol.querySelector('.current').classList.remove('current');
        // 当前索引号加上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) {
        // 计算移动距离
        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() {
        // 移动大于50像素，滑动
        if (flag) {
            if (Math.abs(moveX) > 100) {
                // 右滑
                if (moveX > 0) {
                    index--;
                    // 左滑
                } else if (moveX < 0) {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // 移动小于50像素，回弹
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                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)';
        }, 1000);

    });
});