devbox
天景科技苑
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript轮播图（面向对象）_轮播图-面向对象

作者：天景科技苑 | 2024-08-07 23:58:33

赞

踩

轮播图-面向对象

步骤

轮播图1 HTML+CSS

轮播图2 动态生成页面

通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签

生成 ul ol div 标签节点

根据数组动态生成 原始 ul>li  ol>li

ul > li > img

ol > li

第一个li添加 class,active

将生成的 ul>li ol>li 字符串 写入 ul ol 标签节点

将 ul ol div 标签节点 写入 轮播图div中

获取 原始 ul>li ol>li 标签对象

克隆 第一个ul>li 和 最后一个 ul>li

将 克隆的第一个ul>li 写入 ul末位

将 克隆的最后一个ul>li 写入 ul起始

重新设定ul宽度

是 当前li个数 * li宽度

默认显示 原始轮播图的第一张 也就是 克隆写入之后的 第二个li

ul 默认 向左 定位 一个li宽度

轮播图3 自动轮播

通过 move() 运动函数 以动画效果完成ul标签定位的切换

自动轮播函数

定义一个全局变量 用于 存储 显示li标签的索引下标

初始值 是 1

通过 修改 变量中 的的数值 表示 显示的 li标签

也就是 通过 修改变量中存储的数值 控制 轮播图的执行

定义定时器

变量定义数值累加1

设定 焦点按钮的样式

设定 ul定位的数值

负的 当前显示的li标签 索引下标 * li宽度

通过 move() 运动函数 来 执行 ul标签定位的改变

move( ul标签 , { left : 负的index数值乘以li宽度 } , 运动结束触发的回调函数 )

焦点按钮设定函数

清除 所有的 ol>li 样式

给 显示的ul>li 对应的 ol>li 添加样式

如果 显示 当前ul>li的最后一个 给 第一个ol>li 添加样式

如果 是其他情况

给 显示的ul>li 索引下标 -1 对应的 ol>li 添加样式

ul切换运动终止的回调函数

如果 显示当前ul>li的最后一个

运动结束 给 index 赋值 1

也就是 要显示 当前ul>li的第二个

通过css样式设定 瞬间完成 ul定位的切换

ul标签对象.style.left = -index * li宽度 + 'px'

轮播图4 鼠标移入移出

给 轮播图div标签 添加事件

鼠标移入

终止轮播图的自动运行

也就是 清除  自动轮播 定时器

鼠标移出

再次执行轮播图的自动轮播

也就是 再次调用 autoLoop() 自动轮播函数

轮播图5 点击事件

给 一直存在的轮播图div添加点击事件

通过事件委托的语法形式 给标签添加点击事件

左右切换按钮

左切换按钮

显示上一次张

也就是 显示li标签索引下标 累减 1

根据 新的显示li标签的索引下标 定位ul标签

通过 move运动函数 运动完成 ul标签的定位切换

右切换按钮

显示下一次张

也就是 显示li标签索引下标 累加 1

根据 新的显示li标签的索引下标 定位ul标签

通过 move运动函数 运动完成 ul标签的定位切换

焦点按钮

显示 点击的 ol>li 对应的 ul>li 标签

也就是 ol>li 标签的索引下标 + 1

是 对应的 ul>li 标签的索引下标  

根据 新的显示li标签的索引下标 定位ul标签

通过 move运动函数 运动完成 ul标签的定位切换


 

轮播图6 防止点击过快

定义变量 存储默认值

触发点击事件 执行程序之前 先判断 变量储存的数据

如果是 原始值

变量赋值 其他数值 正常 执行之后的程序

如果是 其他数值

执行 return 终止 执行之后的程序

当 move() 运动函数执行结束 也就是 ul标签定位切换结束

给 变量 赋值 原始值true

可以执行下一次move()运动函数了

轮播图7 轮播图最小化隐藏

当 浏览器 最小化 / 隐藏 / 显示其他程序时

浏览器 会在 window操作系统 的 后台运行

浏览器 本身 不会触发执行任何程序

但是 浏览器中 JavaScript程序 会继续执行

也就是 autoLoop() 中的定时器 会自动继续执行

也就是 ul标签的定位 会被改变

解决方案:

浏览器最小化隐藏时

清除 定时器

浏览器显示时

再次 启动自动轮播函数

visibilitychange事件

添加个 document 的事件

浏览器显示状态监听事件

当浏览器显示状态改变时触发设定的函数程序

document.visibilityState

浏览器显示状态描述

hidden  

隐藏最小化状态

清除定时器

visible

显示状态

再次调用 自动轮播函数

代码（面向对象编程）

HTML部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="./iconfont.ttf">
  8.     <link rel="stylesheet" href="./iconfont.css">
  9.  
  10.     <title>Document</title>
  11.     <style>
  12.         *{
  13.             padding: 0;
  14.             margin: 0;
  15.         }
  16.         li{
  17.             list-style: none;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.         }
  22.         .banner{
  23.             margin: auto;
  24.             width: 1920px;
  25.             height: 1030px;
  26.             border: 2px solid red;
  27.             position: relative;
  28.             background-color: black;
  29.             overflow: hidden;
  30.         }
  31.         .banner ul{
  32.             width: 600%;
  33.             height: 1030px;
  34.             position: absolute;
  35.             left: 0;
  36.             top: 0;
  37.         }
  38.         .banner ul li{
  39.             width: 1920px;
  40.             height: 1030px;
  41.             float: left;
  42.         }
  43.         .banner ol{
  44.             width: 400px;
  45.             height: 80px;
  46.             position: absolute;
  47.             bottom: 50px;
  48.             left: 50%;
  49.             transform: translateX(-50%);
  50.             background-color: rgb(0, 0, 0,0.4);
  51.             border-radius: 30px;
  52.             display: flex;
  53.             justify-content: space-around;
  54.             align-items: center;
  55.             cursor: pointer;
  56.         }
  57.         .banner ol li{
  58.             width: 30px;
  59.             height: 30px;
  60.             margin: 20px;
  61.             border-radius: 50%;
  62.             background-color: white;
  63.         }
  64.         .banner div {
  65.             padding: 0 30px;
  66.             box-sizing: border-box;
  67.             width: 100%;
  68.             height: 80px;
  69.             position: absolute;
  70.             left: 0;
  71.             top: 50%;
  72.             transform: translateY(-100%);
  73.             display: flex;
  74.             justify-content: space-between;
  75.             align-items: center;
  76.         }
  77.         .banner div a{
  78.             font-size: 60px;
  79.             color: white;
  80.         }
  81.         .banner ol .active{
  82.             width: 45px;
  83.             height: 45px;
  84.             transition: 1s;
  85.             background-color: red;
  86.         }
  87.         .banner div span{
  88.             background-color: rgb(14, 13, 13,0.6);
  89.             border-radius: 30%;
  90.             box-sizing: border-box;
  91.             display: block;
  92.             padding: 20px 20px;
  93.             transition: all 0.5s;
  94.         }
  95.         .banner div span:hover{
  96.             background-color: red;
  97.             font-size: 70px;
  98.         }
  99.     </style>
  100. </head>
  101. <body>
  102.     <div class="banner"></div>
  103.     <script src="./move.js"></script>
  104.     <script src="./ind.js"></script>
  105.     <script>
  106.         //定义数组模拟后端传参
  107.         const arr = [{url:'./image/1.png'},
  108.                         {url:'./image/2.png'},
  109.                         {url:'./image/6.png'},
  110.                         {url:'./image/4.png'},
  111.                         {url:'./image/5.png'}];
  112.         const oBanner = document.querySelector(".banner");
  113.         const obj = new CreateTabObj( oBanner , arr );
  114.         // 入口函数调用
  115.         obj.init();
  116.     </script>
  117. </body>
  118. </html>

JavaScript部分

  1. class CreateTabObj {
  2.     constructor(elment, msgArr) {
  3.         // 获取标签对象
  4.         this.ele = elment;
  5.         // 数组模拟数据库
  6.         this.arr = msgArr;
  7.         //创建ul ol div节点
  8.         this.oUl;
  9.         this.oOl;
  10.         this.oDiv;
  11.         this.liWidth;
  12.         this.ulLis;
  13.         this.olLis;
  14.         this.time;
  15.         this.index = 1;
  16.         this.res = true;
  17.     }
  18.  
  19.     // 入口函数
  20.     // 在一个函数中调用所有需要执行的函数程序
  21.     // 也就是 只要 调用一个函数 就调用了所有需要调用的函数
  22.     // 入口函数 必须定义名称是 init
  23.     init() {
  24.         this.theTag();
  25.         this.slideshow();
  26.         this.theMouseMoves();
  27.         this.theMouseClick();
  28.         this.hide();
  29.     }
  30.     // 动态生成标签内容函数
  31.     theTag() {
  32.         //创建ul ol div节点
  33.         this.oUl = document.createElement('ul');
  34.         this.oOl = document.createElement('ol');
  35.         this.oDiv = document.createElement('div');
  36.         // 设定节点内容
  37.         this.oDiv.innerHTML = '<a href="JavaScript:;"><span name="left" class="iconfont icon-zuofanye"></span></a><a href="JavaScript:;"><span name="right" class="iconfont icon-youfanye"></span></a>'
  38.         //循环遍历数组动态写入内容
  39.         let oUlstr = '';
  40.         let oOlstr = '';
  41.         this.arr.forEach(function (item, key) {
  42.             // item 是 数组单元的数据数值 也就是 存储图片数据的对象
  43.  
  44.             // 动态生成 ul>li
  45.             oUlstr += `<li><img src="${item.url}"></li>`;
  46.             // 动态生生 ol>li
  47.             // 给 第一个li标签 添加class,active 也就是 背景颜色是红色
  48.             // 给 每个li标签 添加 num属性属性值是索引下标
  49.             oOlstr += key === 0 ? `<li name = "ollis" class = "active" num = ${key}></li>` : `<li name = "ollis" num = ${key}></li>`
  50.         })
  51.         // 将 生成的字符串 写入 标签节点中
  52.         this.oUl.innerHTML = oUlstr;
  53.         this.oOl.innerHTML = oOlstr;
  54.         // 添加节点,添加到div中
  55.         this.ele.appendChild(this.oUl);
  56.         this.ele.appendChild(this.oOl);
  57.         this.ele.appendChild(this.oDiv);
  58.         //获取生成的 原始 ul>li ol>li标签对象
  59.         this.ulLis = this.oUl.querySelectorAll('li');
  60.         this.olLis = this.oOl.querySelectorAll('li');
  61.  
  62.         //获取标签宽度
  63.         this.liWidth = this.ulLis[0].offsetWidth;
  64.  
  65.         // 克隆标签
  66.         let ulLisFirst = this.ulLis[0].cloneNode(true);
  67.         let ulLisLast = this.ulLis[this.ulLis.length - 1].cloneNode(true);
  68.         // 将 克隆的第一个 写入 ul的最后 
  69.         this.oUl.appendChild(ulLisFirst)
  70.         // 将 克隆的最后一个 写入 ul的起始 
  71.         this.oUl.insertBefore(ulLisLast, this.ulLis[0]);
  72.         // 重新设定ul宽度 
  73.         // 克隆之后li标签个数 * li标签宽度
  74.         // 克隆之后li标签个数是数组单元个数+2
  75.         this.oUl.style.width = (this.arr.length + 2) * this.liWidth + 'px';
  76.         // 将ul向左定位一个li的宽度
  77.         this.oUl.style.left = -this.liWidth + 'px';
  78.     }
  79.     //自动轮播函数
  80.     slideshow() {
  81.         // 设定定时器
  82.         this.time = setInterval(() => {
  83.             if (this.res) {
  84.                 this.res = false;
  85.             } else {
  86.                 return;
  87.             }
  88.             // 变量累加1
  89.             this.index++;
  90.             // index变量累加后 设定 对应的焦点样式
  91.             this.point();
  92.             // 通过 move() 运动函数 完成 ul标签 定位的切换
  93.  
  94.             // 回调函数使用 bind() 方法 修改this指向 
  95.             // 当前 this 指向实例化对象 修改回调函数的this指向是当前this也就是实例化对象
  96.             move(this.oUl, { left: -this.index * this.liWidth }, this.circulation.bind(this))
  97.  
  98.         }, 2000)
  99.     }
  100.  
  101.     //move运动函数执行结束触发的回调函数
  102.     circulation() {
  103.         //  如果是 当前ul的最后一个li 运动结束 立即切换到 当前ul的第二个li
  104.         //  也就是 index 是 最后一个li的索引下标 也就是 arr.length+2-1 
  105.         //  切换到 当前ul的第二个li 也就是 index 赋值 1 
  106.         if (this.index === this.arr.length + 2 - 1) {
  107.             this.index = 1;
  108.             //  如果是 当前ul的第一个li 运动结束 立即切换到 当前ul的倒数二个li
  109.             //  也就是 index 是 第一个li的索引下标 也就是 0
  110.             //  切换到 当前ul的倒数第二个li 也就是 index 赋值 arr.length+2-1-1
  111.         } else if (this.index === 0) {
  112.             // 给 变量 赋值 当前ul的倒数第二个li的索引下标
  113.             this.index = this.arr.length + 2 - 2
  114.         }
  115.         //  给 ul 执行定位 瞬间切换
  116.         // 根据新的index数值 给 ul标签 做瞬间定位切换
  117.         this.oUl.style.left = -this.index * this.liWidth + 'px';
  118.  
  119.         // 运动结束 也就是 一次ul切换完成
  120.         // 给变量赋值原始值 可以 执行下一次运动
  121.         this.res = true;
  122.     }
  123.  
  124.     //焦点图函数
  125.     point() {
  126.         // 清除所有的ol>li焦点样式
  127.         this.olLis.forEach((item) => {
  128.             item.classList.remove('active');
  129.         })
  130.         // 如果 显示 当前ul中最后一个li 给 ol>li 中的 第一个添加样式
  131.         if (this.index === this.arr.length + 2 - 1) {
  132.             // 给 索引是0 的 第一个 ol>li 添加 css样式
  133.             this.olLis[0].classList.add('active');
  134.             // 如果 显示 点券ul中第一个li 给 ol>li 中的 最后一个添加样式
  135.         } else if (this.index === 0) {
  136.             // 给 ol>li 的最后一个 添加 css样式
  137.             this.olLis[this.olLis.length - 1].classList.add('active');
  138.             // 其他情况 给 当期ul>li索引下标 -1 对应的 ol>li 添加样式
  139.         } else {
  140.             // 当前 显示的ul>li的索引下标 也就是 index
  141.             // 数值 -1 是 对应的 ol>li 的 索引下标 
  142.             this.olLis[this.index - 1].classList.add("active");
  143.         }
  144.     }
  145.     //鼠标移入移出函数
  146.     theMouseMoves() {
  147.         // 鼠标移入
  148.         this.ele.addEventListener('mouseenter', () => {
  149.             // 清除定时器
  150.             clearInterval(this.time);
  151.         })
  152.         // 鼠标移出
  153.         this.ele.addEventListener('mouseleave', () => {
  154.             // 再次调用自动轮播
  155.             this.slideshow();
  156.         })
  157.     }
  158.     //点击事件函数
  159.     theMouseClick() {
  160.         // 给 轮播图div添加点击事件
  161.         this.ele.addEventListener('click', (e) => {
  162.             // 判断 如果 事件对象 e.target 的name属性值是 left 点击的是左切换按钮
  163.             if (e.target.getAttribute('name') === "left") {
  164.                 // 防止点击过快
  165.                 if (this.res) {
  166.                     this.res = false;
  167.                 } else {
  168.                     return;
  169.                 }
  170.                 // 切换显示上一个li 
  171.                 // 也就是 索引下标 累减 1 
  172.                 this.index--;
  173.                 // 调用函数 重新设定 焦点按钮css样式
  174.                 this.point();
  175.                 // 根据新的索引下标 通过move()运动函数 
  176.                 // 动画效果 完成ul标签的重新定位
  177.                 move(this.oUl, { left: -this.index * this.liWidth }, this.circulation.bind(this));
  178.             } else if (e.target.getAttribute('name') === "right") {
  179.                 // 判断 如果 事件对象 e.target 的name属性值是 right 点击的是左切换按钮
  180.                 if (this.res) {
  181.                     this.res = false;
  182.                 } else {
  183.                     return;
  184.                 }
  185.                 this.index++;
  186.                 this.point();
  187.                 move(this.oUl, { left: -this.index * this.liWidth }, this.circulation.bind(this));
  188.             } else if (e.target.getAttribute('name') === "ollis") {
  189.                 // 判断 如果 事件对象 e.target 的name属性值是 olLi 点击的是焦点按钮
  190.                 if (this.res) {
  191.                     this.res = false;
  192.                 } else {
  193.                     return;
  194.                 }
  195.                 // 获取当前 点击的ol>li标签 num属性的属性值 
  196.                 // 也就是 点击的ol>li标签的 索引下标 
  197.                 // num属性值+1 是 对应的 ul>li 的索引下标
  198.                 // num属性值 是 字符串类型 必须要转化为数值类型 再 执行+1 运算
  199.                 this.index = Number(e.target.getAttribute('num')) + 1;
  200.                 this.point();
  201.                 move(this.oUl, { left: -this.index * this.liWidth }, this.circulation.bind(this));
  202.             }
  203.         })
  204.     }
  205.     // 浏览器最小化隐藏
  206.     hide() {
  207.         // 给 document 添加 浏览器显示状态监听
  208.         document.addEventListener('visibilitychange', () => {
  209.             // 如果 浏览器显示状态描述 是 hidden 
  210.             if (document.visibilityState === 'hidden') {
  211.                 // 证明当前浏览器隐藏最小化
  212.                 // 清除定时器
  213.                 clearInterval(this.time);
  214.  
  215.                 // 如果 浏览器显示状态描述 是 visible 
  216.             } else if (document.visibilityState === 'visible') {
  217.                 // 证明当前浏览器 显示
  218.                 // 再次调用 自动轮播函数
  219.                 this.autoLoop();
  220.             }
  221.         })
  222.  
  223.     }
  224. }
  225.

运行结果 

 

总结

控制轮播图的核心

就是 控制 变量中的存储的数值

也就是 控制 显示 li标签的索引下标

通过 设定 ul标签的定位 是 变量 * li宽度

也就是 设定 ul标签的定位 显示 变量对应索引下标对应的li标签

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/945081
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号