轮播图功能 :
1. 打开页面 图片自动滚动
2. 鼠标 移入 停止播放 , 鼠标移出 继续播放
3. 点击 左右按钮 切换上下页
一. 准备变量
-
分析 :
- 获取 banner的 宽 ( 展示盒子的宽 ) ==> window.getComputedStyle()
- 默认打开 页面 是 第几张 图片 ( 图片的下标 )
- 定时器
- 开关 : 用于控制不能重复触发运动事件
二. 封装功能
功能一 : 通过 js 处理 前后两张 '假图'
-
问题1 : 为什么要添加 第一张 和 最后一张 ?
- 一个视觉效果, 没有实际意义
- 起一个 缓冲 作用 ?
-
问题2 : 为什么不在 html 中 添加 ?
方便后期维护修改 ( 如果3张, 如果10张呢 ? )
-
分析 :
- 将 ul 内 第一个 和 最后一个 图片 复制 出来
- 将 复制出来的 第一个图片 添加到 ul 最后, 最后一张 添加到 ul 的开头
- 处理 ul 的宽
- 因为添加了两张假图, 宽度发生了改变, 需要重新获取到宽 重新赋值
- 处理 ul 的定位
- 每走一张, 它的 left 值就 减 一张图片的宽
功能二 : 根据 imgBox 内部图片数量, 决定渲染几个焦点
-
分析
- 获取到 图片的 数量
- 实际只有 5张, 所以需要 减掉 2张假图
- 根据图片的数量, 创建出对应数量的 li, 并添加到页面中
- 2-1 创建 li
- 2-2 给 li 添加类名
- 2-3 将图片的 下标 存储在 标签上
- 因为标签有 class 和 id 属性, 直接用 id 自定义属性 id = '1'
- 2-4 给第一个 li 添加一个类名 ( 为什么? )
- 2-5 将 创建出来的 li 添加到 ul 中
功能三 : 自动轮播 => 核心 : 跟随定时器 改变 index (内部存储的值代表 当前在 第几张图)
-
分析 :
- => 假设每间隔 3秒, 切换到 下一张
- 下标0 对应 第一张假图
- 下标1 对应 第一张真图
- 下标2 对应 第二张真图
- .....
- 下标6 对应 最后一张假图
- => 目前是在 下标1 此时定位为 -600px
- 3秒 后应该在 下标2 此时定位 -1200px
- 6秒 后应该在 下标3 此时定位 -1800px
- .......
- n秒 后应该在 下标x 此时定位 - ( x * 轮播可视区宽度banner)
- => 下标 +1 ,图片向左移动, 一个图片的宽
- index ++ , left 值 = - ( 下标 * 展示盒子的宽 )
功能四 : 在所有图片 运动完之后, 需要将 ul 重新定位到 最开始的地方
-
分析 :
- 点击下一张时, left值 向左 所以为 -
- 当运动到 最后一张图片时, 将 ul left值 放在 第一张真图片的位置, 并且下标回到 第一张真图
- 点击上一张时, left值 向右 所以为 +
- 当运动到 第一张图片时, 将 ul left值 立马跳转到 最后一张真图, 并且下标回到最后一张真图
- 因为有两张假图, 所以最后一张图片下标为 图片总长度 - 2
- 调整焦点高亮
- 3-1 将所有的焦点 取消高亮 ( 去掉active 类名 )
- 类名删除 => classList.remove()
- 3-2 我们需要 哪一个焦点 添加高亮, 那么就添加 active类名 => classList.add()
- 执行到这里时, 说明这一轮运动 已经全部结束了
- 所以可以打开开关, 方便下次 点击 能够正常执行
className 和 classList.add 区别 :
- 相同点 : 都可以添加类名
- 不同点 :
- className() 会将 原本的类名 修改 (会覆盖)
- classList.add( ) 会在之前类名后 再次添加类名, 不会覆盖之前的类名
功能五 : 移入移出事件
-
分析 :
- 移入时停止 ( 结束定时器 )
- 移出时开启 ( 再次调用 自动轮播函数 )
功能六 : 添加点击事件 ( 左右按钮, 焦点 )
- 因为都是 展示盒子(可视区) 的后代, 所以利用 事件委托 来做
-
分析 :
判断当前点击的按钮 是否等于 该类名
- 先判断开关变量, 决定能否 继续执行下边的代码
- 如果继续执行, 那么说明要开始 运动了, 要修改开关的值, 让他再次点击时 不能正常执行
- 如果按钮 等于 该类名, 修改当前值
- 修改下标
- 下一页 / 下一张 : 下标 ++
- 上一页 / 上一张 : 下标 --
- 点击各个焦点 :
- 跳转到相对应的图片
- 因为图片 下标 存储在自定义属性 id 上, dataset 获取到的是 一个字符串,直接拼接 会变成 (11, 12...), 所以先 减0 ( 除了+会拼接, 其余所有运算符 都不会拼接 )
- 调用函数
- 谁变化
- left值 : - ( 下标 - 展示盒子的宽 )
- 如何变化 ( 调用重新定位函数 )
功能六 : 关闭页面后 / 最小化, 重新打开页面时, 轮播图抖动
-
分析 :
问题:
- 浏览器最小化之后 DOM 的运动就会 停止, 但是代码中的 定时器并不会 停止
- 所以再次打开时, 会重新执行 DOM 的运动, 但此时可能堆积了 很多个运动函数
解决 :
- 最小化页面时, 停止计时器
- 重新打开时, 开启定时器
- 浏览器标签页被隐藏或显示的时候会触发
visibilitychange事件
- 如果 visibilitychange事件 等于 hidden , 那么就代表 最小化页面, 这时 清除定时器
- 如果 visibilitychange事件 等于 visible , 那么代表 重新打开页面, 这时 调用自动轮播函数
