[JavaScript知识库][ES6] 轮播图---面向过程版本

<!-- 轮播图div -->
<div class="banner">
    <!-- 轮播图内容 -->
    <ul></ul>

    <!-- 焦点按钮 -->
    <ol></ol>

    <!-- 左右切换按钮 -->
    <div>
        <a href="JavaScript:;" name="left">&lt;</a>
        <a href="JavaScript:;" name="right">&gt;</a>
    </div>
</div>

* {
     margin: 0;
     padding: 0;
 }

 ul,
 ol,
 li {
     list-style: none;
 }

 a,
 a:hover,
 a:active {
     text-decoration: none;
 }

 img {
     width: 100%;
     height: 100%;
     display: block;
 }

 .banner {
     width: 600px;
     height: 400px;
     border: 5px solid #000;
     position: relative;
     margin: 50px auto;
     overflow: hidden;
 }

 .banner>ul {
     width: 500%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }

 .banner>ul>li {
     float: left;
     width: 600px;
     height: 400px;
 }

 .banner>ol {
     height: 50px;
     position: absolute;
     bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 15px;
 }

 .banner>ol>li {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #fff;
     margin: 0 15px;
     cursor: pointer;
 }

 .banner>ol>li.active {
     background: red;
 }

 .banner>div {
     width: 100%;
     height: 50px;
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .banner>div>a {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50px;
     height: 50px;
     font-size: 40px;
     color: #fff;
 }

动态生成轮播图页面

当前我们自己定义一个数组 模拟一下

2, 根据数组动态生成页面内容生成 ul>li ol>li

    定义变量 存储 ul>li字符串 ol>li字符串

    循环遍历数组 每一个数组单元 对应一个 ul>li ol>li
        第一个ol>li 有 class,active样式

    将 ul>li字符串 ol>li字符串写入 ul ol 标签对象

    获取 所有的 ul>li 

    克隆所有ul>li中的第一个li标签
    克隆所有ul>li中的最后一个li标签

    克隆的第一个ul>li标签写入到 ul标签的最后
    克隆的最后一个ul>li标签写入到 ul标签的第一个

    获取 ul>li 宽度

    重新设定ul标签的宽度 
        (原始数组单元个数+2) * 一个li宽度 + 'px'

    重新定位ul标签
        向左定位一个 li宽度

// 动态生成页面函数
function setPage() {
    // 定义变量储存生成的字符串
    let ulStr = '';
    let olStr = '';

    // 循环遍历数组
    bannerArr.forEach(function (item, key) {
        // ul标签中的li标签
        ulStr += `<li><img src="./images/${item.name}"></li>`;
        // ol标签中的li标签
        // 第一个li有class,active
        olStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` :
            `<li name="focus" num="${key}"></li>`;
    })

    // 循环结束将字符串写入ul,ol标签
    oUl.innerHTML = ulStr;
    oOl.innerHTML = olStr;

    // 获取所有的ul>li  ol>li
    // 给全局变量赋值
    oUlLis = oUl.querySelectorAll('li');
    oOlLis = oOl.querySelectorAll('li');

    // 克隆 ul>li 中 第一个和最后一个li
    const cloneFirst = oUlLis[0].cloneNode(true);
    const cloneLast = oUlLis[oUlLis.length - 1].cloneNode(true);

    // 克隆的第一个写入ul标签最后
    oUl.appendChild(cloneFirst);
    // 克隆的最后一个写入ul标签起始
    oUl.insertBefore(cloneLast, oUlLis[0]);

    // 获取li标签的宽度
    liWidth = oUlLis[0].offsetWidth;

    // 重新设定ul标签宽度 
    // (原始数组个数+2) * 一个li的宽度 拼接 px单位
    oUl.style.width = (length + 2) * liWidth + 'px';

    // 重新定位ul标签
    // 向左定位一个li标签宽度
    oUl.style.left = -liWidth + 'px';
}

自动轮播

  通过 ul标签 定位的改变 实现 显示内容不同的效果
  ul标签 定位的改变 是 运动执行的效果
  通过定义的运动函数实现

  通过定时器 来 调用运动函数 
  实现 每间隔一段时间 ul做一次定位的改变
  定时器的 时间间隔 必须要 大于 move() 运动函数的时间

 // 自动轮播函数
 function autoLoop() {
     // 定义定时器
     time = setInterval(function () {
         // 变量累加1
         index++;
         console.log(index)
         // 在运动之前 先切换 焦点按钮 css样式
         setFocusStyle();

         // 调用move运动函数,改变ul定位
         // 每次定位的数据是 显示li索引下标*一个li宽度
         move(oUl, {left: -index * liWidth}, loopEnd);
     }, 4000)
 }

焦点样式函数

    清除所有ol>li标签焦点样式
    给 显示的 ul>li 对应的 ol>li 标签添加焦点样式
    ul>li索引下标数值 - 1 是 ol>li索引下标数值
    也就是 index存储数值 -1 是 ol>li标签的索引下标

    特殊情况
        当 index 存储的索引下标是 最后一个li的索引下标时
        index-1 没有对应的 ol>li标签 
        此时 应该是 所有 ol>li 中 索引下标是0的 第一个ol>li 标签 添加样式

        当 index 存储的索引下标是 第一个li的索引下标时
        index-1 没有对应的 ol>li标签 
        此时 应该是 所有 ol>li 中 索引下标是 最后一个 ol>li标签 添加样式

        最后一个ul>li 给 第一个 ol>li 添加样式
        第一个ul>li 给 最后一个 ol>li 添加样式

 // 焦点样式切换
 function setFocusStyle() {
     // 给所有的 ol>li 清除 class,active
     // 给索引下标和显示li对应的ol>li 添加 class,active
     // 索引下标 是 显示li索引下标-1 
     oOlLis.forEach(function (item, key) {
         // 清除 ol>li 标签样式
         item.classList.remove('active');
         // 如果 索引下标 等于 index-1 添加 样式
         if (key === index - 1) {
             item.classList.add('active');
         }
     })
     console.log(index)
     // 特殊情况 如果是最后一个ul>li 给 第一个 ol>li 添加样式
     if (index === length + 1) {
         oOlLis[0].classList.add('active');

         // 特殊情况 如果是第一个ul>li 给 最后一个 ol>li 添加样式
     } else if (index === 0) {
         oOlLis[oOlLis.length - 1].classList.add('active');
     }
 }

轮播图运动结束函数

 轮播图切换结束时 触发执行函数
     判断 index的数值 
         如果 index 存储的是 最后一个li的索引下标
         也就是 切换到 最后一个li , 也就是克隆的原始轮播图的第一张
             给 index 赋值 1 同时立即切换轮播图 到 所有ul>li的第二个标签

         如果 index 存储的是 第一个li的索引下标
         也就是 切换到 第一个li , 也就是克隆的原始轮播图的最后一张
             给 index 赋值 倒数第二个ul>li的索引下标 同时立即切换轮播图 到 所有 ul>li 的 倒数第二个标签          

 // 轮播结束的回调函数
 function loopEnd() {
     // 判断index的数值

     // 如果 index的数值是 所有li的最后一个 
     // index 赋值 1 
     // 运动结束 从最后一个li 瞬间定位到 第二个li
     if (index === length + 1) {
         index = 1;
         oUl.style.left = -index * liWidth + 'px';

         // index 是 0 瞬间定位到 倒数第二个li
     } else if (index === 0) {
         index = length;
         oUl.style.left = -index * liWidth + 'px';
     }

     // 当所有的运动结束 ，已经可以正常切换下一张了
     // 给 bool变量赋值 true 可以再次触发move()运动函数
     bool = true;
 }

鼠标移入移出

  鼠标移入:
      停止轮播图运动
      清除 自动轮播 定时器

// 鼠标移入移出
function setMouse() {
    // 鼠标移入 父级div标签 清除定时器
    // 鼠标移入 父级div标签 清除一次定时器就可以了
    oBanner.addEventListener('mouseenter', function () {
        clearInterval(time);
        console.log(111);
    })

    // 鼠标移出 再次调用 自动轮播函数 
    oBanner.addEventListener('mouseleave', function () {
        autoLoop();
    })
}

点击效果

 左右按钮 焦点标签 都是动态生成的
 使用事件委托语法 添加点击效果

 1,  点击 左按钮
     显示 上一个 ul>li 标签内容
     变量index-- 
     设定焦点标签css样式
     根据 新的 index 定位 ul标签 
     动态完成切换效果  

 2,  点击 右按钮
     显示 下一个 ul>li 标签内容
     变量index++ 
     设定焦点标签css样式
     根据 新的 index 定位 ul标签 
     动态完成切换效果 
 
 3,  点击 焦点按钮
     显示 点击的 ol>li 对应的 ul>li
     ol>li标签索引下标+1 是 对应 ul>li索引下标
     变量index 赋值 ol>li索引下标+1
     设定焦点标签css样式
     根据 新的 index 定位 ul标签 
     动态完成切换效果 

// 点击效果
function setClick() {
    // 给父级div添加点击事件
    oBanner.addEventListener('click', function (e) {
        // 通过 e.target 判断点击标签

        // 如果 标签名称是 left 点击的是 左按钮
        if (e.target.getAttribute('name') === 'left') {
            // 判断bool变量 
            if (!bool) {
                // 如果 bool 不是原始值true 执行return 
                // 终止之后程序的执行
                return;
            }


            // 变量index--
            index--;

            // 调用焦点按钮样式切换函数
            setFocusStyle();

            // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
            bool = false

            // 根据新的index数值 调用move()运动函数改变ul标签的定位
            move(oUl, {
                left: -index * liWidth
            }, loopEnd);

            // 如果 标签名称是 right 点击的是 右按钮
        } else if (e.target.getAttribute('name') === 'right') {
            // 判断bool变量 
            if (!bool) {
                // 如果 bool 是false,开关是关闭的，就不执行后面的代码了
                return;
            }

            // 变量index++
            index++;

            // 调用焦点按钮样式切换函数
            setFocusStyle();

            // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
            bool = false

            // 根据新的index数值 调用move()运动函数改变ul标签的定位
            move(oUl, {left: -index * liWidth}, loopEnd);



            // 如果 标签名称是 focus 点击的是 焦点按钮
        } else if (e.target.getAttribute('name') === 'focus') {
            // 判断bool变量 
            if (!bool) {
                // 如果 bool 是false,开关是关闭的，就不执行后面的代码了
                return;
            }

            // 变量index 赋值 点击ol>li标签 索引下标+1
            index = e.target.getAttribute('num') - 0 + 1;

            // 调用焦点按钮样式切换函数
            setFocusStyle();

            // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
            bool = false

            // 根据新的index数值 调用move()运动函数改变ul标签的定位
            move(oUl, {
                left: -index * liWidth
            }, loopEnd);
        }
    })
}

浏览器后台运行

   浏览器最小化 或者 显示运行其他程序
   浏览器不再是主要运行的程序 操作系统会切换到后台运行
   再次 显示浏览器时 轮播图执行会出现混乱

   当浏览器后台运行时 停止轮播图的自动轮播
   浏览器显示时 再次触发轮播图的运行


   给 document 添加 visibilitychange 浏览器显示状态 监听事件
   浏览器显示状态改变时会触发函数程序

   document.visibilityState 浏览器显示状态描述
       hidden  隐藏 也就是 后台运行
               清除 定时器 终止 轮播图的自动执行

       visible 显示 也就是 正常运行浏览器
               再次调用 自动轮播函数

 // 浏览器后台运行效果
 function setHide() {
     document.addEventListener('visibilitychange', function () {
         // 离开当前页
         if (document.visibilityState === 'hidden') {
             // 清除定时器,终止轮播图自动运行
             clearInterval(time);
         } else if (document.visibilityState === 'visible') {
             // 再次调用自动轮播函数
             autoLoop();
         }
     })
 }

防止点击过快

   本质是防止 上一个定时器没有执行结束 就触发下一个定时
   也就是 防止同时有多个定时器触发执行

   设定一个变量 存储原始值
   判断变量 如果存储是原始值   变量赋值其他数值 执行之后的程序
   判断变量 如果存储不是原始值 执行return 终止之后的程序

轮播图重点1:

 定时器的嵌套
     通过定时器A 每间隔一段时间 调用触发定时器B
     定时器A 的间隔时间 一定要 大于 定时器B的执行时间
     如果 定时器A的时间间隔短 就会 同时 有 多个定时器B 在同时执行
     就是同时操作 同一个对象 造成显示混乱效果

轮播图重点2:

  通过 ul标签定位的改变 执行效果是显示不同的li标签也就是显示不同的图片
  通过 显示li标签的索引下标 * li标签的宽度 控制 ul标签的定位
  定义变量 index 存储 索引下标数值 
  也就是 通过 控制 index 存储的数据数值 控制 ul标签的定位 控制显示内容
  改变显示内容 一定要 先改变 index存储的数值 
  再 通过 index存储的数值 改变ul标签的定位

全部code

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        a,
        a:hover,
        a:active {
            text-decoration: none;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .banner {
            width: 600px;
            height: 400px;
            border: 5px solid #000;
            position: relative;
            margin: 50px auto;
            /* overflow: hidden; */
        }

        .banner>ul {
            width: 500%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .banner>ul>li {
            float: left;
            width: 600px;
            height: 400px;
        }

        .banner>ol {
            height: 50px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
        }

        .banner>ol>li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            margin: 0 15px;
            cursor: pointer;
        }

        .banner>ol>li.active {
            background: red;
        }

        .banner>div {
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .banner>div>a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            font-size: 40px;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 轮播图div -->
    <div class="banner">
        <!-- 轮播图内容 -->
        <ul></ul>

        <!-- 焦点按钮 -->
        <ol></ol>

        <!-- 左右切换按钮 -->
        <div>
            <a href="JavaScript:;" name="left">&lt;</a>
            <a href="JavaScript:;" name="right">&gt;</a>
        </div>
    </div>

    <!-- 导入外部文件加载move运动函数 -->
    <script src="move.js"></script>
    <script>
        // 1, 轮播图html,css

        // 2, 动态生成轮播图页面内容
        // 模拟生成一个数组
        var bannerArr = [{
                id: 1,
                width: 500,
                height: 333,
                size: 29.7,
                name: '1.jpg'
            },
            {
                id: 2,
                width: 500,
                height: 333,
                size: 19.3,
                name: '2.jpg'
            },
            {
                id: 3,
                width: 500,
                height: 333,
                size: 17.1,
                name: '3.jpg'
            },
            {
                id: 4,
                width: 500,
                height: 333,
                size: 20.3,
                name: '4.jpg'
            },
            {
                id: 5,
                width: 600,
                height: 400,
                size: 320,
                name: '5.jpg'
            },
        ];

        // 3, 获取标签对象
        const oBanner = document.querySelector('.banner');
        const oUl = oBanner.querySelector('ul');
        const oOl = oBanner.querySelector('ol');

        // 定义全局变量
        let oUlLis;
        let oOlLis;
        let length = bannerArr.length;
        let liWidth;
        // 定义变量储存显示li标签对应的索引下标
        // 初始值是 1
        let index = 1;
        // 存储定时器
        let time;
        // 定义一个变量 存储原始值 防止 点击操作执行过快 
        // 开启开关：运动结束，一张切换完毕，可以打开开关了，切换下一张
        // 关闭开关：点击左右按钮或者焦点后，开关关闭，等运动结束再开
        // 初始值：如果是false，那一次都点不了，
        let bool = true;


        // 调用函数,动态渲染生成页面
        setPage();

        // 调用自动轮播函数
        autoLoop();

        // 调用鼠标移入移出函数
        setMouse();

        // 调用点击效果函数
        setClick();

        // 浏览器后台运动函数
        setHide();



        // 动态生成页面函数
        function setPage() {
            // 定义变量储存生成的字符串
            let ulStr = '';
            let olStr = '';

            // 循环遍历数组
            bannerArr.forEach(function (item, key) {
                // ul标签中的li标签
                ulStr += `<li><img src="./images/${item.name}"></li>`;
                // ol标签中的li标签
                // 第一个li有class,active
                olStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` :
                    `<li name="focus" num="${key}"></li>`;
            })

            // 循环结束将字符串写入ul,ol标签
            oUl.innerHTML = ulStr;
            oOl.innerHTML = olStr;

            // 获取所有的ul>li  ol>li
            // 给全局变量赋值
            oUlLis = oUl.querySelectorAll('li');
            oOlLis = oOl.querySelectorAll('li');

            // 克隆 ul>li 中 第一个和最后一个li
            const cloneFirst = oUlLis[0].cloneNode(true);
            const cloneLast = oUlLis[oUlLis.length - 1].cloneNode(true);

            // 克隆的第一个写入ul标签最后
            oUl.appendChild(cloneFirst);
            // 克隆的最后一个写入ul标签起始
            oUl.insertBefore(cloneLast, oUlLis[0]);

            // 获取li标签的宽度
            liWidth = oUlLis[0].offsetWidth;

            // 重新设定ul标签宽度 
            // (原始数组个数+2) * 一个li的宽度 拼接 px单位
            oUl.style.width = (length + 2) * liWidth + 'px';

            // 重新定位ul标签
            // 向左定位一个li标签宽度
            oUl.style.left = -liWidth + 'px';
        }

        // 自动轮播函数
        function autoLoop() {
            // 定义定时器
            time = setInterval(function () {
                // 变量累加1
                index++;
                console.log(index)
                // 在运动之前 先切换 焦点按钮 css样式
                setFocusStyle();

                // 调用move运动函数,改变ul定位
                // 每次定位的数据是 显示li索引下标*一个li宽度
                move(oUl, {
                    left: -index * liWidth
                }, loopEnd);
            }, 4000)
        }

        // 轮播结束的回调函数
        function loopEnd() {
            // 判断index的数值

            // 如果 index的数值是 所有li的最后一个 
            // index 赋值 1 
            // 运动结束 从最后一个li 瞬间定位到 第二个li
            if (index === length + 1) {
                index = 1;
                oUl.style.left = -index * liWidth + 'px';

                // index 是 0 瞬间定位到 倒数第二个li
            } else if (index === 0) {
                index = length;
                oUl.style.left = -index * liWidth + 'px';
            }

            // 当所有的运动结束 ，已经可以正常切换下一张了
            // 给 bool变量赋值 true 可以再次触发move()运动函数
            bool = true;
        }


        // 焦点样式切换
        function setFocusStyle() {
            // 给所有的 ol>li 清除 class,active
            // 给索引下标和显示li对应的ol>li 添加 class,active
            // 索引下标 是 显示li索引下标-1 
            oOlLis.forEach(function (item, key) {
                // 清除 ol>li 标签样式
                item.classList.remove('active');
                // 如果 索引下标 等于 index-1 添加 样式
                if (key === index - 1) {
                    item.classList.add('active');
                }
            })
            console.log(index)
            // 特殊情况 如果是最后一个ul>li 给 第一个 ol>li 添加样式
            if (index === length + 1) {
                oOlLis[0].classList.add('active');

                // 特殊情况 如果是第一个ul>li 给 最后一个 ol>li 添加样式
            } else if (index === 0) {
                oOlLis[oOlLis.length - 1].classList.add('active');
            }
        }

        // 鼠标移入移出
        function setMouse() {
            // 鼠标移入 父级div标签 清除定时器
            // 鼠标移入 父级div标签 清除一次定时器就可以了
            oBanner.addEventListener('mouseenter', function () {
                clearInterval(time);
                console.log(111);
            })

            // 鼠标移出 再次调用 自动轮播函数 
            oBanner.addEventListener('mouseleave', function () {
                autoLoop();
            })
        }

        // 点击效果
        function setClick() {
            // 给父级div添加点击事件
            oBanner.addEventListener('click', function (e) {
                // 通过 e.target 判断点击标签

                // 如果 标签名称是 left 点击的是 左按钮
                if (e.target.getAttribute('name') === 'left') {
                    // 判断bool变量 
                    if (!bool) {
                        // 如果 bool 不是原始值true 执行return 
                        // 终止之后程序的执行
                        return;
                    }


                    // 变量index--
                    index--;

                    // 调用焦点按钮样式切换函数
                    setFocusStyle();

                    // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
                    bool = false

                    // 根据新的index数值 调用move()运动函数改变ul标签的定位
                    move(oUl, {
                        left: -index * liWidth
                    }, loopEnd);

                    // 如果 标签名称是 right 点击的是 右按钮
                } else if (e.target.getAttribute('name') === 'right') {
                    // 判断bool变量 
                    if (!bool) {
                        // 如果 bool 是false,开关是关闭的，就不执行后面的代码了
                        return;
                    }

                    // 变量index++
                    index++;

                    // 调用焦点按钮样式切换函数
                    setFocusStyle();

                    // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
                    bool = false

                    // 根据新的index数值 调用move()运动函数改变ul标签的定位
                    move(oUl, {left: -index * liWidth}, loopEnd);



                    // 如果 标签名称是 focus 点击的是 焦点按钮
                } else if (e.target.getAttribute('name') === 'focus') {
                    // 判断bool变量 
                    if (!bool) {
                        // 如果 bool 是false,开关是关闭的，就不执行后面的代码了
                        return;
                    }

                    // 变量index 赋值 点击ol>li标签 索引下标+1
                    index = e.target.getAttribute('num') - 0 + 1;

                    // 调用焦点按钮样式切换函数
                    setFocusStyle();

                    // move函数要执行了，表示要开始切换下一张了，关闭开关，等运动完了再打开开关
                    bool = false

                    // 根据新的index数值 调用move()运动函数改变ul标签的定位
                    move(oUl, {
                        left: -index * liWidth
                    }, loopEnd);
                }
            })
        }

        // 浏览器后台运行效果
        function setHide() {
            document.addEventListener('visibilitychange', function () {
                // 离开当前页
                if (document.visibilityState === 'hidden') {
                    // 清除定时器,终止轮播图自动运行
                    clearInterval(time);
                } else if (document.visibilityState === 'visible') {
                    // 再次调用自动轮播函数
                    autoLoop();
                }
            })
        }
    </script>

</body>

</html>