scroll，offset，client三个属性的基本操作，轮播图的基本做法和业务需求页面滚动事件滚动条在滚动的时候持

页面滚动事件
- 滚动条在滚动的时候持续触发的事件
  - 事件类型scroll
- window.addEventListener('scroll', function () { // 执行的操作 })
- box的内容在进行滚动的时候 box.addEventListener('scroll', function () { // 执行的操作 })
加载事件
- 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
- 建议：后期业务处理之前，先添加load事件，保证所有资源全部加载完毕了

元素大小和位置

scroll家族
- scroll事件
- scrollWidth/scrollHeight:
  - 获取元素的宽高值，包含内容 + padding
- scrollTop, scrollLeft
  - 获取被卷去的大小
    - 尽量在scroll事件里面获取被卷去的距离
  - 可读写
  - scrollTop
    - 获取垂直方向，被卷去头部距离
- 返回顶部案例:小火箭
  - 通过scrollTop获取卷去的距离
  - 通过scrollTop让页面回到顶部
offset家族
- 可视宽高
  - offsetWidth
    - 包含width padding border
  - offsetHeight
  - 注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
- 相对路径
  - 相对于定位父容器的距离
  - offsetLeft:当前元素相对于定位父容器的左侧距离
  - offsetTop:当前元素相对于定位父容器的上侧距离
- 特征
  - 获取出来的是数值,方便计算
  - 只读属性,只能使用,不能设置
- 电梯导航
- 京东显示固定导航栏
client家族
- 给window注册的事件
- window.resize
  - window.onresize = function () {}
- clientWidth
- clientWidth
- clientTop
- clientLeft

轮播图

业务需求

手动轮播
- 单击下方的缩略图
- 当前被单击的缩略图高亮
- 文本描述需要动态变化
- 让大图相应的变化
上一张和下一张
自动轮播

手动轮播

元素的获取

缩略图--标记，我们要为其添加单击事件
文本描述信息：单击之后要修改文字描述信息

大图：单击之后要切换大图的显示

// 获取元素
// - 缩略图--标记，我们要为其添加单击事件
let indicators = document.querySelectorAll('.indicator li')
// - 文本描述信息：单击之后要修改文字描述信息
let desc = document.querySelector('.extra > h3')
// - 大图：单击之后要切换大图的显示
let slides = document.querySelectorAll('.slides li')
// 下一张按钮
let next = document.querySelector('.extra > .next')
// 上一张按钮
let prev = document.querySelector('.extra > .prev')
// 获取整个轮播图区域
let main = document.querySelector('.main')

为元素绑定事件实现手动轮播

// 为缩略图绑定单击事件：由于获取到的是伪数组，所以需要遍历，为每一个元素绑定事件
indicators.forEach(function(ele, index) {
    // 绑定事件
    ele.addEventListener('click', function() {
        // 1.让当前被单击的缩略图，添加高亮样式--样式类名操作
        // 1.1 找到缩略图中有active样式的元素，将其active样式移除
        document.querySelector('.indicator .active').classList.remove('active')
        // 为当前被单击的缩略图元素添加active样式
        ele.classList.add('active')

        // 2.修改文本描述信息
        desc.innerText = `第${index + 1}张图的描述信息`

        // 3.显示对应的大图
        // 3.1 之前有active样式的大图元素，移除active样式
        document.querySelector('.slides .active').classList.remove('active')
        // 3.2 为对应索引位置的大图添加active样式
        slides[index].classList.add('active')
    })
})

下一张

可以定义一个全局的索引，单击下一张的时候，让索引加1，调用索引位置的li元素的click事件

为了实现循环轮播，我们需要判断索引是否越界，如果越界，则让索引重置到0

// 下一张
next.addEventListener('click', function() {
    // 让索引+1
    index++
    // 判断索引是否越界
    if (index > indicators.length - 1) {
        index = 0
    }
    // 调用索引位置的li元素的click单击事件
    indicators[index].click()
})

上一张

prev.addEventListener('click', function() {
    index--
    // 判断索引是否越界
    if (index < 0) {
        index = indicators.length - 1
    }
    // 调用索引位置的li元素的click单击事件
    indicators[index].click()
})

细节

我们发现，现在如果先单击某个缩略图，再单击上一张和下一张，索引位置出现异常

原因是：我们单击缩略图并没有更新当前正确的索引位置，索引还是从0开始

// 为缩略图绑定单击事件：由于获取到的是伪数组，所以需要遍历，为每一个元素绑定事件
indicators.forEach(function(ele, i) {
    // 绑定事件
    ele.addEventListener('click', function() {
        ..........

        // 3.3 重置全局的索引
        index = i
    })
})

自动轮播

定时器的添加和停止

自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用 “下一张” 按钮的单击事件

// 自动轮播
// 自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用  “下一张” 按钮的单击事件
let timeId = setInterval(function() {
    next.click()
}, 1000)

// 鼠标进入到轮播图区域，停止定时器
main.addEventListener('mouseenter', function() {
    clearInterval(timeId)
})
// 鼠标移出之后，重新开启定时器
main.addEventListener('mouseleave', function() {
    timeId = setInterval(function() {
        next.click()
    }, 1000)
})