最全面的无缝滚动轮播图（只为解放你的双手）

其他 2020-06-19 10:14:49 阅读次数: 0

文章目录

写在前面：最近在给自己的二手网页添加动画时发现轮播图还真是无处不在，样式也是五花八门。于是手写轮播图的想法涌上心头，经过一番折腾之后，它诞生了。优化了些许内容，对无js基础的小伙伴也很友好（只需改动样式，js动态变化）。

1. 轮播图效果展示

图片大小受限，播放张数较少
在这里插入图片描述

2. 轮播图剖析

2.1. 原理简介

  1. 用html+css实现页面的基本布局；
  2. 用js实现动画的功能需求。

2.2. 功能需求

  1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；
  2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理；
  3. 图片播放的同时，下面小圆圈模块跟随一起变化；
  4. 点击小圆圈，可以播放相应图片；
  5. 鼠标不经过轮播图，轮播图也会自动播放图片；
  6. 鼠标经过，轮播图模块， 自动播放停止；

2.3. 遇到的问题及解决方案

2.3.1. 问题：

  1. 当连续点击切换按钮时，会出现动画速度加快的现象（点击频率越高，图片切换越快）

2.3.2. 解决方案：

  1. 定义节流阀：

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量var flag= true;
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头

3. 代码分析

3.1. HTML代码分析

  1. 轮播图骨架大多有ul(li>a>img)组成；
  2. 这种写法比较易懂且结构清晰；
  3. 对于图片的连接也更容易处理。
  4. 本文html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?3gi21h');
            src: url('fonts/icomoon.eot?3gi21h#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?3gi21h') format('truetype'), url('fonts/icomoon.woff?3gi21h') format('woff'), url('fonts/icomoon.svg?3gi21h#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .box {
            position: relative;
            width: 720px;
            height: 450px;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .arrow_l,
        .arrow_r {
            display: none;
            width: 45px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            font-size: 30px;
            color: black;
            background-color: rgba(0, 0, 0, .4);
            opacity: 0.5;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'icomoon';
            z-index: 999;
        }
        
        .arrow_l {
            left: 0;
        }
        
        .arrow_r {
            right: 0;
        }
        
        ol {
            position: absolute;
            bottom: 30px;
            right: 100px;
            width: 100px;
            height: 20px;
        }
        
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin: 5px 3px 0;
            border: 1px solid #333;
            border-radius: 25px;
            background-color: rgba(0, 0, 0, .4);
            cursor: pointer;
        }
        
        .current {
            background-color: #fff;
        }
        
        ul {
            position: absolute;
            width: 600%;
            height: 100%;
        }
        
        ul li {
            float: left;
            width: 720px;
            height: 100%;
        }
        
        ul li img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="javascript:;" class="arrow_l"></a>
        <a href="javascript:;" class="arrow_r"></a>
        <ul>
            <li>
                <a href="javascript:;"><img src="./images/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/2.jpg" alt=""></a>
            </li>
        </ul>

        <ol></ol>
    </div>
    </body>
</html>

注意点：

  1. 本文按钮图标采用字体图标的方式引入（没有字体图标不影响功能），点此了解字体图标的使用方法；
  2. html文件中的ol下并没有存在相应的li，原因是所有的li（小圆点）会根据图片的张数自动生成（只需按照自己需求添加图片）。

3.2. JavaScript代码逐步引导

  1. 根据要求逐步实现功能；
  2. 对于无缝滚动，本文采用手动封装缓动动画的形式满足需求
  3. 缓动动画代码（注释清晰）
   // 封装缓动动画函数
   function animate(obj, target, callback) {
       // 调用函数即清除一次定时器（防止不断触发定时器）
       clearInterval(obj.timer);
       // 定时器命名为obj.timer防止不断开辟内存空间，降低执行效率
       obj.timer = setInterval(function() {
           // 写定时器让元素做动画
           // 缓动动画移动距离= 目标位置 - 起始位置 / 份数（此处为10）
           var step = (target - obj.offsetLeft) / 10;
           // 如果直接用上面的step会存在小数问题（无法到达目标位置），故需要进行取整（避免小数）
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
           // 如果物体到达目标位置即停止（关闭定时器）
           if (obj.offsetLeft == target) {
               clearInterval(obj.timer);
               // 动画完成后，执行回调函数
               // 先判断是否存在回调函数
               callback && callback();
           } else {
               // 把得到的步数赋值给带定位的物体
               obj.style.left = obj.offsetLeft + step + 'px';
           }
       }, 15)
   }

关于更多动画封装，点击教你手动封装自己的动画；

  1. 本文JavaScript代码（注释清晰）
<script src="./animate.js"></script>
    <script>
        // 获取元素
        var box = document.querySelector('.box');
        var ul = document.querySelector('ul');
        var arrow_l = document.querySelector('.arrow_l');
        var arrow_r = document.querySelector('.arrow_r');
        var ol = document.querySelector('ol');
        // 获取盒子的宽度
        var boxtWidth = box.offsetWidth;
        // 定义按钮点击计算次数的变量
        var num = 0;
        // 定义计算小圆圈索引的变量
        var cricle = 0;
        // 定义节流阀，防止动画重叠
        var flag = true;
        // 1.鼠标经过box显示按钮（离开隐藏）
        box.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            // 鼠标经过，停止播放
            clearInterval(focusTimer);
            // 清除定时器变量
            focusTimer = null;
        });
        box.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            // 鼠标离开，继续播放
            focusTimer = setInterval(function() {
                arrow_r.click();
            }, 2000)
        });
        // 2.动态生成小圆圈
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li')
            li.setAttribute('index', i);
            ol.appendChild(li);
            // 3.排他思想，让小圆圈点击变色
            ol.children[0].className = 'current';
            li.addEventListener('click', function() {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                // 把index赋值给每个控制变量
                num = cricle = index;
                // 4.点击小圆圈让图片动起来
                // animate(obj,target,callback)
                animate(ul, -index * boxtWidth);
            })
        }
        // 6.克隆第一张，让动画无缝衔接(此处深克隆)
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        // 5.点击右侧按钮，图片无缝滚动
        arrow_r.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == ul.children.length - 1) {
                    ul.style.left = 0;
                    num = 0
                }
                num++;
                animate(ul, -num * boxtWidth, function() {
                    // 解开节流阀
                    flag = true;
                });
                // 7.点击右侧按钮，小圆圈也跟着运动，声明控制小圆圈的变量cricle
                cricle++;
                // 如果走到了最后一张，即复原
                if (cricle == ol.children.length) {
                    cricle = 0
                }
                // 调用函数改变每个小点的样式
                cricleChange();
            }
        });
        // 5.点击左侧按钮，图片无缝滚动
        arrow_l.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * boxtWidth + 'px';
                }
                num--;
                animate(ul, -num * boxtWidth, function() {
                    flag = true;
                });
                // 7.点击右侧按钮，小圆圈也跟着运动，声明控制小圆圈的变量cricle
                cricle--;
                // 如果走到了第一张，即复原
                cricle = cricle < 0 ? ol.children.length - 1 : cricle;
                // 调用函数改变每个小点的样式
                cricleChange();
            }
        });
        // 8.自动播放的功能
        var focusTimer = setInterval(function() {
            // 手动调用点击事件
            arrow_r.click();
        }, 2000)

        // 定义小圆圈样式变化的函数
        function cricleChange() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[cricle].className = 'current';
        }
    </script>

注意点：

  1. 此处引入的animate.js是我们封装的缓动动画；
  2. 此JavaScript代码写在div后body前即可。

写在最后：
轮播图种类繁多，但大体相似：
此处再介绍一种控制透明度（opacity）来实现轮播效果的写法

  1. 效果预览：

在这里插入图片描述

  1. 做法与第一种思路一致，实现播放的方法不一（介绍略）
  2. 代码奉上：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./iconfont.css">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            position: relative;
            width: 720px;
            height: 450px;
            margin: 100px auto;
            background-color: orangered;
            overflow: hidden;
        }
        
        .arrow_l,
        .arrow_r {
            display: none;
            width: 45px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            font-size: 30px;
            color: black;
            background-color: rgba(0, 0, 0, .4);
            opacity: 0.5;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
        }
        
        .arrow_l {
            left: 0;
        }
        
        .arrow_r {
            right: 0;
        }
        
        ol {
            position: absolute;
            bottom: 30px;
            right: 100px;
            width: 100px;
            height: 20px;
        }
        
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin: 5px 3px 0;
            border: 1px solid #333;
            border-radius: 25px;
            background-color: rgba(0, 0, 0, .4);
            cursor: pointer;
        }
        
        ul {
            width: 100%;
            height: 100%;
        }
        
        ul li {
            position: absolute;
            top: 0;
            left: 0;
            width: 720px;
            height: 100%;
            opacity: 0;
            transition: all 0.6s;
        }
        
        ul li img {
            width: 100%;
            height: 100%;
        }
        
        .active {
            opacity: 1;
        }
        
        .current {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="javascript:;" class="arrow_l iconfont icon-arrow-left"></a>
        <a href="javascript:;" class="arrow_r iconfont icon-zuojiantou"></a>
        <ul>
            <li class="active">
                <a href="javascript:;"><img src="./images/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./images/2.jpg" alt=""></a>
            </li>
        </ul>

        <ol></ol>
    </div>

    <script>
        // 获取元素
        var box = document.querySelector('.box');
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        var arrow_l = document.querySelector('.arrow_l');
        var arrow_r = document.querySelector('.arrow_r');
        // 定义变量num，控制图片展示
        var num = 0;
        // 定义变量cricle控制小圆圈展示
        var cricle = 0;
        // 定义节流阀（防止动画叠加）
        var flag = true;
        // 鼠标经过盒子显示翻页按钮(离开隐藏)
        box.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            // 鼠标经过，停止播放
            clearInterval(myTimer);
            myTimer = null;
        });
        box.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            // 鼠标离开，继续播放
            myTimer = setInterval(function() {
                arrow_r.click();
            }, 2000)
        });

        // 动态生成小圆点
        for (var i = 0; i < ul.children.length; i++) {
            // 创建li节点
            var li = document.createElement('li');
            // 为li节点添加自定义属性
            li.setAttribute('index', i);
            // 把动态生成的li追加到ol中
            ol.appendChild(li);
            // 默认第一个li被选中
            ol.children[0].className = 'current';
            // 利用排他思想，点击小圆圈，小圆圈变色
            li.addEventListener('click', function() {
                for (var i = 0; i < ol.children.length; i++) {
                    // 去除所有li的样式
                    ol.children[i].className = '';
                }
                var index = this.getAttribute('index');
                // 把图片及小圆圈与圆圈的自定义属性进行绑定
                num = cricle = index;
                ol.children[index].className = 'current';
                for (var i = 0; i < ul.children.length; i++) {
                    ul.children[i].className = '';
                }
                ul.children[index].className = 'active';
            });
        }
        // 右击按钮（让图片播放）
        arrow_r.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num < ul.children.length - 1) {
                    num++;
                    cricle++;
                } else {
                    num = 0;
                    cricle = 0;
                }
                goFalg();
            }
        });
        // 左击按钮（让图片播放）
        arrow_l.addEventListener('click', function() {
            if (flag) {
                flag = false;
                if (num == 0) {
                    num = ul.children.length - 1;
                    cricle = ol.children.length - 1;
                } else {
                    num--;
                    cricle--;
                }
                goFalg();
            }
        });

        // 定义定时器，让图片自动播放
        var myTimer = setInterval(function() {
            arrow_r.click();
        }, 3000);

        // 小圆点样式及图片变化代码重复封装函数
        function cricleChange() {
            // 排他思想，去除所有的样式，点击的索引添加样式
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].className = '';
                ol.children[i].className = '';
            }
            ul.children[num].className = 'active';
            ol.children[cricle].className = 'current';
        }

        function goFalg() {
            cricleChange();
            var flagTimer = setInterval(function() {
                flag = true;
            }, 2000)
        }
    </script>
</body>

</html>

over

希望你我都在路上，Come on

猜你喜欢

转载自blog.csdn.net/cwq521o/article/details/106444782
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022