轮播图的暂停与播放
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>
