移动端轮播图的实现及与PC端轮播图的区别

最新推荐文章于 2024-06-27 19:48:27 发布

Heigl swift

最新推荐文章于 2024-06-27 19:48:27 发布

阅读量565

点赞数 2

文章标签： html css3 js

本文链接：https://blog.csdn.net/helgeal/article/details/120000249

版权

前言

本文是在学习完移动端轮播图后进行编写，发现移动端和PC端的关于动画的显现还是有着版本的区别，但核心的思想还是不变，思考的逻辑也几乎相同

一、移动端框架的搭建

本文单以轮播图为框架，图片为本地图片，使用时请自行添加图片（可以添加任意张图片）

<body>
    <div class="nav">
        <!-- 轮播图 -->
        <ul class="clearfix">
            <li style="background-color: red;">
                <a href="#"><img src="images/f1.jpg" alt=""></a>
            </li>
            <li style="background-color: yellow;">
                <a href="#"><img src="images/f2.jpg" alt=""></a>
            </li>
            <li style="background-color: skyblue;">
                <a href="#"><img src="images/f3.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 小圆点 -->
        <ol></ol>
    </div>
</body>

二、CSS的书写

本文由于是移动端的编写所以先引入了移动端的初始化文件

申明：

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**

* 1. Change the default font family in all browsers (opinionated).

* 2. Correct the line height in all browsers.

* 3. Prevent adjustments of font size after orientation changes in

* IE on Windows Phone and in iOS.

/* Document

========================================================================== */

可以用github自行下载or搜索： /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */自行引入

代码如下

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            max-width: 540px;
            min-width: 320px;
            background-color: #f2f2f2;
            font: normal 14px/1.5 Tahoma, "lucida grande", verdana, "microsoft yahei", STXihei, hei;
            color: #000;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            margin: 0 auto;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #222;
        }
        
        div {
            box-sizing: border-box;
        }
        
        .nav {
            position: relative;
            width: 100%;
            height: 153.391px;
            overflow: hidden;
        }
        
        .nav ul {
            margin-left: -100%;
            width: 500%;
        }
        
        .nav ul li {
            float: left;
            width: 20%;
            height: 100%;
        }
        
        .nav ul li img {
            width: 100%;
        }
        
        .nav ol {
            position: absolute;
            bottom: 20px;
            right: 88px;
        }
        
        .nav ol li {
            float: left;
            margin-right: 8px;
            width: 10px;
            height: 5px;
            border-radius: 2.5px;
            background-color: rgba(0, 0, 0, .7);
            z-index: 999;
        }
        
        .nav ol li.current {
            width: 20px;
            background-color: rgb(231, 228, 228, 0.7);
        }
    </style>

三、JS的编写

本文的JS核心是通过CSS3来进行动画的编写ul.style.transform = 'translateX(' + -flag1 * nav.offsetWidth + 'px' + ')'; 注释写的也比较全面有基础的人可以很快看懂，但没有进行重复代码的优化和节省cup计算的优化如果对您有用将不胜荣幸

代码如下

<script>
        var ul = document.querySelector('.nav').children[0];
        var ol = document.querySelector('.nav').children[1];
        // 动态生成小圆点
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            ol.appendChild(li);
        }
        // 给第一个孩子默认current的类
        ol.children[0].classList.add('current');
        // 无缝滚动的准备
        var img1 = ul.children[0].cloneNode(true); //克隆第一张图片到最后
        ul.appendChild(img1);
        var img2 = ul.children[ol.children.length - 1].cloneNode(true); //克隆倒数第一张图片到最前面
        ul.insertBefore(img2, ul.children[0]);
        // 图片自动播放功能
        var flag1 = 0;
        var nav = document.querySelector('.nav');
        var timer = setInterval(function() {
            ul.style.transition = 'all .5s';
            flag1++;
            ul.style.transform = 'translateX(' + -flag1 * nav.offsetWidth + 'px' + ')';
        }, 2000);

        ul.addEventListener('transitionend', function() {
            if (flag1 > 2) {
                flag1 = 0;
            } else if (flag1 < 0) {
                flag1 = 2;
            }
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + -flag1 * nav.offsetWidth + 'px' + ')';
            // 制作小圆点的变化
            var current = document.querySelector('.current');
            current.classList.remove('current');
            ol.children[flag1].classList.add('current');
        });

        // 手拖动模块
        var startX;
        ul.addEventListener('touchstart', function(e) {
            clearInterval(timer);
            startX = e.targetTouches[0].pageX;
        });

        ul.addEventListener('touchmove', function(e) {
            var touchX = e.targetTouches[0].pageX - startX;
            ul.style.transform = 'translateX(' + (-flag1 * nav.offsetWidth + touchX) + 'px' + ')';
            e.preventDefault();
        });

        ul.addEventListener('touchend', function(e) {
            // 启动自动播放功能
            clearInterval(timer);
            timer = setInterval(function() {
                ul.style.transition = 'all .5s';
                flag1++;
                ul.style.transform = 'translateX(' + -flag1 * nav.offsetWidth + 'px' + ')';
            }, 2000);
            // 自动弹的功能
            ul.style.transition = 'all .5s';
            if (e.changedTouches[0].pageX - startX > 50) {
                flag1--;
            } else if (e.changedTouches[0].pageX - startX < -50) {
                flag1++;
            } else {
                ul.style.transition = 'all .1s';
            }
            ul.style.transform = 'translateX(' + -flag1 * nav.offsetWidth + 'px' + ')';
        });
    </script>

本段代码实现了一下功能

1 初始自动播放 touchstart后清除定时器 touchend后开启定时器（定时器就是自动播放功能）

2 索引条随着图片运动

3 可以拖动图片在绝对值>50px后松开触摸可以自动的弹到下一张（上一张）图片

4 当绝对值小于<50px后松开会更快的回弹

PC端轮播图的区别

1 移动的核心代码不同 pc端用的是自己编写的动画JS 核心代码是 Element.style.left的更改，移动端用的是CSS3自带的动画功能transform。// 我认为两者的存在兼容上的使用区别，CSS3在IE10以上才支持而用JS几乎没有兼容问题普遍适用单CSS3很明显降低了代码量也减轻了计算机的计算压力。

2 移动端由于是用触屏的而PC端用的是键盘鼠标所以事件有着本质的区别移动端用的是touch系列的事件而 PC 端用的是 mouse系列的事件。

3 移动端由于不用考虑兼容性问题所以添加了classList系列的事件对象更加简单的实现了对类名的增（add）删（remove）改（toggle-切换）

总结

总的来说PC端在此功能的实现上与移动端无本质上的逻辑上的不同，是由于终端的不同以及兼容性的考虑所造成的不同在不考虑兼容性问题时除了注册事件不同以外可以写的几乎一模一样。

Heigl swift

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端轮播图的实现及与PC端轮播图的区别

前言本文是在学习完移动端轮播图后进行编写，发现移动端和PC端的关于动画的显现还是有着版本的区别，但核心的思想还是不变，思考的逻辑也几乎相同一、移动端框架的搭建本文单以轮播图为框架，图片为本地图片，使用时请自行添加图片（可以添加任意张图片）<body> <div class="nav">  <ul class="clearfix"> <li s..
复制链接

扫一扫