DOM- 网页特效篇

1. 滚动事件

当页面进行滚动时触发的事件
为什么要学？
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面滚动：

scroll系列属性	作用
element.scrollTOP	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

<script>
    // 页面滚动事件
    window.addEventListener('scroll',function(){
        // 执行的操作
    })
</script>

给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        /* width: 5000px; */
        height: 3000px;
        background: linear-gradient(to bottom, red, blue);
      }
      .box {
        width: 500px;
        height: 200px;
        border: 1px solid red;
        /* 出现滚动条 */
        overflow: scroll;
      }
      .son {
        width: 500px;
        height: 2000px;
        background: linear-gradient(to bottom, yellow, blue);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="son"></div>
    </div>
    <script>
      // 为页面添加滚动事件
      // document.addEventListener('scroll', function(){
      window.addEventListener('scroll', function(){
        console.log(123);
      })

      // 为某一个元素添加滚动事件：要求元素内容的宽或高大于父容器
      let box = document.querySelector('.box')
      box.addEventListener('scroll', function(){
        console.log(456);
      })
    </script>
  </body>
</html>

2. 加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么要学？
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
事件名：load
监听页面所有资源加载完毕：
- 给 window 添加 load 事件

// 页面加载事件
window.addEventListener('load',function(){
    // 执行的操作
})

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：
- 给 document 添加 DOMContentLoaded 事件

// 页面加载事件
document.addEventListener('DOMContentLoaded',function(){
    // 执行的操作
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      img {
        /* height: 300px; */
      }
    </style>
    <script>
      // 为window添加页面加载完毕的 事件，当页面的dom结构和页面中的所有资源都加载完毕了才进行触发
      // window.addEventListener('load', function() {
      //   let button = document.querySelector('button')
      //   console.log(button)

      //   button.addEventListener('click', function() {
      //     console.log(123)
      //   })
      // })
    </script>
  </head>
  <body>
    <div>
      <p>我是p元素</p>
      <button>我是按钮</button>
      <img
        src="https://img1.baidu.com/it/u=1849701997,2238263017&fm=26&fmt=auto"
        alt=""
      />
    </div>
    <script>
      let button = document.querySelector('button')
      let img = document.querySelector('img')
      window.addEventListener('load', function() {
        console.log(img.offsetHeight)
        console.log(button.offsetHeight)
      })

      // 图片资源加载完毕了，触发load事件 --- 瀑布流
      img.addEventListener('load', function() {
        console.log(img.offsetHeight)
      })

      // 只要dom结构解析完毕就触发，而不会等待其它的资源加载完毕
      document.addEventListener('DOMContentLoaded', function() {
        console.log('DOMContentLoaded')
      })
      // 后期如果没有特别意外，都可以将业务代码写到load事件的处理函数中
      window.addEventListener('load', function() {
        console.log('load')
      })
    </script>
  </body>
</html>

3. 元素大小和位置

3.1 scroll家族

获取宽高：
- 获取元素的内容总宽高（不包含滚动条）返回值不带单位
- scrollWidth和scrollHeight
获取位置:
- 获取元素内容往左、往上滚出去看不到的距离
- scrollLeft和scrollTop
- 这两个属性是可以修改的

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

注意事项： document.documentElement HTML 文档返回对象为HTML元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 2000px;
        /* border: 10px solid;
        padding: 20px; */
        /* 默认会产生滚动条 */
        overflow: scroll;
      }
      .son {
        height: 10000px;
        width: 10000px;
        /* border: 10px solid; */
        /* padding: 20px; */
        background: linear-gradient(to bottom, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="son"></div>
    </div>
    <script>
      window.addEventListener('load', function() {
        // 获取元素
        let box = document.querySelector('.box')
        let son = document.querySelector('.son')

        // scroll：  内容宽度+padding  不包含边框，同时去除滚动条的宽度
        console.log(box.scrollWidth, box.scrollHeight)

        // 为页面添加滚动的监听事件
        document.addEventListener('scroll', function() {
          // 获取当前页面滚动出屏幕的距离
          // console.log(window.scrollTop)  undefined
          // console.log(document.scrollTop)  undefined
          // console.log(document.body.scrollTop)  0
          // console.log(box.scrollTop)

          // document.documentElement:html根元素
          console.log(document.documentElement.scrollTop)
        })

        box.addEventListener('scroll', function() {
          console.log(box.scrollTop, box.scrollLeft)
        })
      })
    </script>
  </body>
</html>

案例：页面滚动显示返回顶部按钮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        height: 8000px;
        background-image: linear-gradient(red, blue);
      }

      a {
        color: #fff;
      }

      .actGotop {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 150px;
        height: 195px;
        display: none;
        z-index: 100;
      }

      .actGotop a,
      .actGotop a:link {
        width: 150px;
        height: 195px;
        display: inline-block;
        background: url(images/gotop.png) no-repeat;
        outline: none;
      }

      .actGotop a:hover {
        width: 150px;
        height: 195px;
        background: url(images/gotop.gif) no-repeat;
        outline: none;
      }
    </style>
  </head>

  <body>
    <!-- 返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <!-- 需求：
    1.滚动出屏幕的距离超过1000的时候，出现小火箭，否则隐藏
      1.1 为页面添加滚动事件的监听:scroll
      1.2 获取滚动出屏幕的距离：scrollTop
      1.3 元素显示和隐藏：样式操作
    2.单击小火箭能够返回到顶部
      2.1 添加单击事件
      2.2 为scrollTop赋值为0 -->

    <script>
      window.addEventListener('load', function() {
        let actGotop = document.querySelector('.actGotop')

        // 为页面添加滚动事件的监听
        document.addEventListener('scroll', function() {
          //  获取滚动出屏幕的距离
          let offset = document.documentElement.scrollTop
          // 判断滚动出屏幕的距离是否大于1000
          if (offset >= 1000) {
            actGotop.style.display = 'block'
          } else {
            actGotop.style.display = 'none'
          }
        })

        // 单击小火箭能够返回到顶部
        actGotop.addEventListener('click', function() {
          document.documentElement.scrollTop = 0
        })
      })
    </script>
  </body>
</html>

3.2 offset家族

获取宽高：
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
获取位置：
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop 注意是只读属性

offset 与 style 区别

offse

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

仿京东固定头部

<!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;
        box-sizing: border-box;
      }

      .content {
        overflow: hidden;
        width: 1000px;
        height: 3000px;
        background-color: pink;
        margin: 0 auto;
      }

      .backtop {
        display: none;
        width: 50px;
        left: 50%;
        margin: 0 0 0 505px;
        position: fixed;
        bottom: 60px;
        z-index: 100;
      }

      .backtop a {
        height: 50px;
        width: 50px;
        background: url(./images/bg2.png) 0 -600px no-repeat;
        opacity: 0.35;
        overflow: hidden;
        display: block;
        text-indent: -999em;
        cursor: pointer;
      }

      .header {
        position: fixed;
        top: -80px;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: purple;
        text-align: center;
        color: #fff;
        line-height: 80px;
        font-size: 30px;
        transition: all 0.3s;
      }

      .sk {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin-top: 600px;
      }
    </style>
  </head>

  <body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
      <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
      <img src="./images/close2.png" alt="" />
      <a href="javascript:;"></a>
    </div>

    <script>
      // 需求
      // 当垂直向上滚动页面，当秒杀模块刚好移动到顶部(大于等于)的时候，出现导航栏,否则隐藏
      // 1。监听页面滚动的监听
      // 2。获取秒杀模块离顶部的距离:offsetTop
      // 3。判断当前滚动的距离是否大于等于秒杀模块离顶部的距离，如果满足，则显示导航，否则隐藏  document.documentELement.scrllTop
      // 添加页面加载事件
      window.addEventListener('load', function() {
        let sk = document.querySelector('.sk')
        let header = document.querySelector('.header')
        // 获取秒杀模块离顶部的距离
        let sktop = sk.offsetTop

        // 添加页面滚动的监听
        document.addEventListener('scroll', function() {
          // 获取当前页面滚动出 屏幕的距离
          let dis = document.documentElement.scrollTop
          // 判断秒杀模块是否滚动到顶部
          if (dis >= sktop) {
            header.style.top = 0
          } else {
            header.style.top = '-80px'
          }
        })
      })
    </script>
  </body>
</html>

电梯导航案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        height: 3000px;
      }

      .aside {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 10px;
        cursor: pointer;
      }

      .active {
        background-color: red;
        color: #fff;
      }

      .content {
        width: 660px;
        margin: 400px auto;
      }

      .neirong {
        height: 300px;
        margin-bottom: 20px;
        color: #fff;
      }

      .content1 {
        background-color: red;
      }

      .content2 {
        background-color: blue;
      }

      .content3 {
        background-color: orange;
      }

      .content4 {
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="aside">
      <div class="item active">男装/女装</div>
      <div class="item">儿童服装/游乐园</div>
      <div class="item">电子产品</div>
      <div class="item">电影/美食</div>
    </div>

    <div class="content">
      <div class="neirong content1">男装/女装</div>
      <div class="neirong content2">儿童服装/游乐园</div>
      <div class="neirong content3">电子产品</div>
      <div class="neirong content4">电影/美食</div>
    </div>

    <script>
      window.addEventListener('load', function() {
        // 左侧导航菜单
        let items = document.querySelectorAll('.aside >  .item')
        // 右侧内容面板
        let neirongs = document.querySelectorAll('.content >  .neirong')
        // 遍历左侧导航项添加事件
        items.forEach(function(ele, index) {
          ele.addEventListener('click', function() {
            // 一:排他
            // 获取当前有active的元素，清除active样式
            document
              .querySelector('.aside > .item.active')
              .classList.remove('active')
            // 为当前元素添加active样式
            ele.classList.add('active')

            // 二:右侧内容置顶
            document.documentElement.scrollTop = neirongs[index].offsetTop
          })
        })
      })
    </script>
  </body>
</html>

3.3 client家族

获取宽高：
- 获取元素的可见部分宽高（不包含边框，滚动条等）
- clientWidth和clientHeight
获取位置：
- 获取左边框和上边框宽度
- clientLeft和clientTop 注意是只读属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        border: solid;
        /* 默认会产生滚动条 */
        overflow: hidden;
      }
      .son {
        height: 300px;
        width: 1500px;
        border: 10px solid;
        padding: 10px;
        border-width: 10px 20px 30px 40px;
        /* padding: 20px; */
        background: linear-gradient(to bottom, red, blue);
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="son">
        aaaaaa
      </div>
    </div>
    <script>
      window.addEventListener('load', function() {
        let box = document.querySelector('.box')
        let son = document.querySelector('.son')

        console.log(box.clientWidth, box.clientHeight)
        console.log(son.clientLeft, son.clientTop)
        
        // window.getComputedStyle(元素, null):获取当前元素的所有样式,返回一个对象
        console.log(window.getComputedStyle(son, null).borderColor)
        console.log(window.getComputedStyle(son, null).borderLeftWidth)
        console.log(window.getComputedStyle(son, null).padding)
        console.log(window.getComputedStyle(son, null).background)
      })
    </script>
  </body>
</html>

3.4 resize事件的使用

会在窗口尺寸改变的时候触发事件：

resize

检测屏幕宽度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <script>
      window.addEventListener('resize', function() {
        // console.log(document.documentElement.clientWidth)
        // console.log(document.documentElement.scrollWidth)
        // console.log(document.documentElement.offsetWidth)
        let w = document.documentElement.clientWidth
        // 页面默认是红色,宽度> 768 ---green  宽度> 992 ---blue  宽度> 1200 ---pink
        if (w > 768) {
          document.documentElement.style.background = 'green'
        } 
        
        if (w > 992) {
          document.documentElement.style.background = 'blue'
        } 
        
        if (w > 1200) {
          document.documentElement.style.background = 'pink'
        }
      })
    </script>
  </body>
</html>

4.综合案例轮播图案例

实现单击下方的标记
- 下方的被单击的标记添加样式(变亮)，其他的标记清除样式(变暗)--排他法
- 图片描述的更新
- 上方的图片变化，让当前对应的图片显示，其它的图片隐藏--排他法
- 细节说明：排他法主要是添加或移除元素的active样式
实现过程
- 获取所有标记元素---indicator li
- 获取到的元素是伪数组，遍历为每个li元素绑定事件
- 在事件处理函数中，使用排他法为标记和图片添加或移除active样式
- 完成图片描述的更新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .main {
        width: 700px;
        margin: auto;
        background: #000;
      }

      .slides {
        height: 320px;
        position: relative;
      }

      .slides ul li {
        /* display: none; */
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        /* 这里实现淡入淡出的关键 */
        transition: all 0.3s;
      }

      .slides li.active {
        /* display: block; */
        opacity: 1;
      }

      .slides .extra {
        width: 700px;
        height: 53px;
        line-height: 53px;
        position: absolute;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
      }

      .slides .extra h3 {
        width: 82%;
        margin: 0;
        margin-right: 20px;
        padding-left: 20px;
        color: #98e404;
        font-size: 28px;
        float: left;
        font-weight: 500;
        font-family: 'Microsoft Yahei', Tahoma, Geneva;
      }

      .slides .extra a {
        width: 30px;
        height: 29px;
        display: block;
        float: left;
        margin-top: 12px;
        margin-right: 3px;
        background-image: url(./assets/icon_focus_switch.png);
      }

      .slides .extra .prev {
        background-position: 0 0;
      }

      .slides .extra .prev:hover {
        background-position: -30px 0;
      }

      .slides .extra .next {
        background-position: -60px 0;
      }

      .slides .extra .next:hover {
        background-position: -90px 0;
      }

      .indicator {
        padding: 10px 0;
      }

      .indicator ul {
        list-style-type: none;
        margin: 0 0 0 4px;
        padding: 0;
        overflow: hidden;
      }

      .indicator ul li {
        position: relative;
        float: left;
        width: 60px;
        margin: 0 4px 0 5px;
        text-align: center;

        cursor: pointer;
      }

      .indicator li img {
        display: block;
        border: 0;
        text-align: center;
        width: 60px;
      }

      .indicator li .mask {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
      }

      .indicator li .border {
        display: none;
        width: 54px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 20;
        border: 3px solid #98e404;
      }

      /* li里面的mask 和 border 刚开始都是显示的 */
      /* 我们写一个样式css */
      .indicator .active .mask {
        display: none;
      }

      .indicator .active .border {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="slides">
        <ul>
          <li class="active">
            <a href="#"
              ><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
        </ul>

        <div class="extra">
          <h3>第1张图的描述信息</h3>
          <a class="prev" href="javascript:;"></a>
          <a class="next" href="javascript:;"></a>
        </div>
      </div>
      <div class="indicator">
        <ul>
          <li class="active">
            <img src="assets/s_01.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_02.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_03.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_04.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_05.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_06.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_07.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_08.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_09.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_10.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
        </ul>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

window.addEventListener('load', function() {
  // 1.单击小图实现图片的切换
  // 所有小图
  let indicators = document.querySelectorAll('.indicator li')
  // 所有大图
  let slides = document.querySelectorAll('.slides li')
  // 图片信息
  let info = document.querySelector('.extra h3')
  // 下一张
  let next = document.querySelector('.extra .next')
  // 上一张
  let prev = document.querySelector('.extra .prev')
  // 整个轮播图
  let main = document.querySelector('.main')
  // 当前图片的索引
  let index = 0

  // 遍历为所有li元素绑定单击事件,实现图片的切换
  indicators.forEach(function(ele, i) {
    ele.addEventListener('click', function() {
      // li元素本身的排他
      document.querySelector('.indicator li.active').classList.remove('active')
      ele.classList.add('active')
      // 大图的排他
      document.querySelector('.slides li.active').classList.remove('active')
      slides[i].classList.add('active')
      // 图片信息
      info.innerText = `第${i + 1}张图的描述信息`

      // 为了避免单击之后 的下一张和下一张序号正确,我们应该将全局的索引进行重置
      index = i
    })
  })

  // 2.单击上一张和下一张实现图片的切换
  next.addEventListener('click', function() {
    index++
    // 判断索引是否越界,如果越界,则重置到0
    if (index > indicators.length - 1) {
      index = 0
    }
    indicators[index].click()
  })
  prev.addEventListener('click', function() {
    index--
    if (index < 0) {
      index = indicators.length - 1
    }
    indicators[index].click()
  })

  // 3.实现自动轮播
  let timeId

  let startTime = function() {
    timeId = setInterval(function() {
      next.click()
    }, 1000)
  }
  startTime()

  // 鼠标进入，停止定时器
  main.addEventListener('mouseenter', function() {
    clearInterval(timeId)
  })
  main.addEventListener('mouseleave', function() {
    startTime()
  })

  // 3.实现自动轮播 --未封装
  // let timeId = setInterval(function() {
  //   next.click()
  // }, 1000)
  // // 鼠标进入，停止定时器
  // main.addEventListener('mouseenter', function() {
  //   clearInterval(timeId)
  // })
  // main.addEventListener('mouseleave', function() {
  //   timeId = setInterval(function() {
  //     next.click()
  //   }, 1000)
  // })
})

Web APIs(滚动事件，加载事件，元素大小和位置（scroll家族， offset家族，client家族）)