轮播图的暂停与播放

HTML

<!DOCTYPE html>
<html lang="zh-CN">
  <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>轮播图</title>
    <style>
      /* ! 3. 轮播图 */
      .slider {
        max-width: 750px;
        min-width: 320px;
        margin: auto;
        padding: 0 10px;
      }
      .slider .imgs {
        /* 图片容器必须要有高度,否则下面图片不能正常显示 */
        height: 150px;
      }
      .slider .imgs img {
        /* 图片完全充满父级空间显示 */
        height: 100%;
        width: 100%;
        /* 图片带有圆角 */
        border-radius: 10px;
        /* 默认图片全部隐藏,只有有active的图片才显示 */
        display: none;
      }
      .slider .imgs img:hover {
        cursor: pointer;
      }
      /* 默认显示第一张 */
      .slider .imgs img.active {
        display: block;
      }
      /* 轮播图按钮组 */
      .slider .btns {
        /* 按钮水平一排显示,用flex,且水平居中 */
        display: flex;
        place-content: center;
      }
      .slider .btns span {
        /* 按钮宽高相同,确定显示成一个正圆 */
        width: 8px;
        height: 8px;
        /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
        background-color: rgba(255, 255, 255, 0.4);
        /* 50%可确保显示为正圆 */
        border-radius: 50%;
        /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
        margin: -12px 3px 5px;
      }
      .slider .btns span.active {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="slider" onmouseover="pointerIn()" onmouseleave="pointerOut()">
      <!-- 
            图片容器
            1. 图片组
            2. 按钮组
            注: 按钮数组与图片数量是一样的
         -->
      <div class="imgs">
        <!-- 轮播图默认从第一张开始显示 -->
        <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
        <img src="./images/banner2.jpg" alt="" data-index="2" />
        <img src="./images/banner3.png" alt="" data-index="3" />
      </div>
      <!-- 切换按钮数量与图片数量必须一致 -->
      <div class="btns">
        <span data-index="1" class="active" onclick="setActive()"></span>
        <span data-index="2" onclick="setActive()"></span>
        <span data-index="3" onclick="setActive()"></span>
      </div>
    </div>
    <script>
      // 1. 获取全部图片和按钮
      const imgs = document.querySelectorAll(".slider .imgs img");
      const btns = document.querySelectorAll(".slider .btns span");
      //   const box = document.querySelector(".slider");
      // 2. 设置激活状态
      function setActive() {
        // 1. 清空图片和所有按钮的激活状态
        imgs.forEach(img => img.classList.remove("active"));
        btns.forEach(btn => btn.classList.remove("active"));
        // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
        event.target.classList.add("active");
        imgs.forEach(img => {
          if (img.dataset.index === event.target.dataset.index) {
            img.classList.add("active");
          }
        });
      }
      // 3. 自动播放
      // [1,2,3]
      // [2,3,1]
      // [3,1,2]
      // [1,2,3]
      // 首尾相连,实现循环播放
      // 自动点击: 事件派发器
      // 间歇式触发,每隔一段固定时间会自动触发一次事件
      // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
      let car = setInterval(
        arr => {
          // 1. 头部删除
          let i = arr.shift();
          // 2. 尾部追加
          arr.push(i);
          arrNew = arr;
          // 3. 事件派发: 模拟用户点击
          btns[i].dispatchEvent(new Event("click"));
        },
        2000,
        Object.keys(btns)
      );
      //   console.log(Object.keys(btns));
      // console.log(Object.keys(imgs));
      function pointerIn() {
        clearInterval(car);
      }
      //   box.onmouseover = function () {
      //     clearInterval(car);
      //   };
      function pointerOut() {
        car = setInterval(
          arr => {
            // 1. 头部删除
            let i = arr.shift();
            // 2. 尾部追加
            arr.push(i);
            arrNew = arr;
            // 3. 事件派发: 模拟用户点击
            btns[i].dispatchEvent(new Event("click"));
          },
          2000,
          arrNew
        );
      }
      // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
      // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
    </script>
  </body>
</html>
轮播图的暂停与播放

轮播图的暂停与播放

HTML

更多相关文章

随机推荐
