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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> [ES6] 轮播图---面向过程版本 -> 正文阅读

[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>