轮播图的暂停与播放

HTML

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>轮播图</title>
  8.     <style>
  9.       /* ! 3. 轮播图 */
  11.       .slider {
  12.         max-width: 750px;
  13.         min-width: 320px;
  14.         margin: auto;
  15.         padding: 0 10px;
  16.       }
  18.       .slider .imgs {
  19.         /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  20.         height: 150px;
  21.       }
  23.       .slider .imgs img {
  24.         /* 图片完全充满父级空间显示 */
  25.         height: 100%;
  26.         width: 100%;
  27.         /* 图片带有圆角 */
  28.         border-radius: 10px;
  29.         /* 默认图片全部隐藏,只有有active的图片才显示 */
  30.         display: none;
  31.       }
  33.       .slider .imgs img:hover {
  34.         cursor: pointer;
  35.       }
  36.       /* 默认显示第一张 */
  38.       .slider .imgs img.active {
  39.         display: block;
  40.       }
  41.       /* 轮播图按钮组 */
  43.       .slider .btns {
  44.         /* 按钮水平一排显示,用flex,且水平居中 */
  45.         display: flex;
  46.         place-content: center;
  47.       }
  49.       .slider .btns span {
  50.         /* 按钮宽高相同,确定显示成一个正圆 */
  51.         width: 8px;
  52.         height: 8px;
  53.         /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  54.         background-color: rgba(255, 255, 255, 0.4);
  55.         /* 50%可确保显示为正圆 */
  56.         border-radius: 50%;
  57.         /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  58.         margin: -12px 3px 5px;
  59.       }
  61.       .slider .btns span.active {
  62.         background-color: #fff;
  63.       }
  64.     </style>
  65.   </head>
  67.   <body>
  68.     <div class="slider" onmouseover="pointerIn()" onmouseleave="pointerOut()">
  69.       <!-- 
  70.             图片容器
  71.             1. 图片组
  72.             2. 按钮组
  73.             注: 按钮数组与图片数量是一样的
  74.          -->
  75.       <div class="imgs">
  76.         <!-- 轮播图默认从第一张开始显示 -->
  77.         <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
  78.         <img src="./images/banner2.jpg" alt="" data-index="2" />
  79.         <img src="./images/banner3.png" alt="" data-index="3" />
  80.       </div>
  81.       <!-- 切换按钮数量与图片数量必须一致 -->
  82.       <div class="btns">
  83.         <span data-index="1" class="active" onclick="setActive()"></span>
  84.         <span data-index="2" onclick="setActive()"></span>
  85.         <span data-index="3" onclick="setActive()"></span>
  86.       </div>
  87.     </div>
  89.     <script>
  90.       // 1. 获取全部图片和按钮
  91.       const imgs = document.querySelectorAll(".slider .imgs img");
  92.       const btns = document.querySelectorAll(".slider .btns span");
  93.       //   const box = document.querySelector(".slider");
  94.       // 2. 设置激活状态
  95.       function setActive() {
  96.         // 1. 清空图片和所有按钮的激活状态
  97.         imgs.forEach(img => img.classList.remove("active"));
  98.         btns.forEach(btn => btn.classList.remove("active"));
  100.         // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
  101.         event.target.classList.add("active");
  102.         imgs.forEach(img => {
  103.           if (img.dataset.index === event.target.dataset.index) {
  104.             img.classList.add("active");
  105.           }
  106.         });
  107.       }
  109.       // 3. 自动播放
  110.       // [1,2,3]
  111.       // [2,3,1]
  112.       // [3,1,2]
  113.       // [1,2,3]
  114.       // 首尾相连,实现循环播放
  115.       // 自动点击: 事件派发器
  117.       // 间歇式触发,每隔一段固定时间会自动触发一次事件
  118.       // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
  120.       let car = setInterval(
  121.         arr => {
  122.           // 1. 头部删除
  123.           let i = arr.shift();
  124.           // 2. 尾部追加
  125.           arr.push(i);
  126.           arrNew = arr;
  127.           // 3. 事件派发: 模拟用户点击
  128.           btns[i].dispatchEvent(new Event("click"));
  129.         },
  130.         2000,
  131.         Object.keys(btns)
  132.       );
  134.       //   console.log(Object.keys(btns));
  135.       // console.log(Object.keys(imgs));
  136.       function pointerIn() {
  137.         clearInterval(car);
  138.       }
  139.       //   box.onmouseover = function () {
  140.       //     clearInterval(car);
  141.       //   };
  142.       function pointerOut() {
  143.         car = setInterval(
  144.           arr => {
  145.             // 1. 头部删除
  146.             let i = arr.shift();
  147.             // 2. 尾部追加
  148.             arr.push(i);
  149.             arrNew = arr;
  150.             // 3. 事件派发: 模拟用户点击
  151.             btns[i].dispatchEvent(new Event("click"));
  152.           },
  153.           2000,
  154.           arrNew
  155.         );
  156.       }
  158.       // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
  159.       // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
  160.     </script>
  161.   </body>
  162. </html>