<!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>轮播图</title><style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; color: #343434; } div.banner { width: 80vw; margin: 0 auto; position: relative; z-index: 10; } div.banner div.images { width: 100%; } div.banner div.images a { width: 100%; height: 100%; display: none; } div.banner div.images a.active { display: block; } div.banner div.images img { width: 100%; } div.banner div.btns { position: absolute; width: auto; display: grid; grid-template-columns: repeat(4, 20px); gap: 10px; height: 10px; bottom: 20px; right: 20px; z-index: 200; overflow: hidden; } div.banner div.btns span { width: 100%; height: 100%; display: block; background-color: aliceblue; border-radius: 10px; cursor: pointer; font-size: 2px; } div.banner div.btns span:hover, div.banner div.btns span.active { background-color: blueviolet; }</style></head><body><div class="banner"> <div class="images"> <a href="https://www.php.cn/k.html" target="_blank"><img src="https://img.php.cn/upload/aroundimg/000/000/001/62ea76c2b5ace916.png"></a> <a href="https://www.php.cn/k.html?1" target="_blank"><img src="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></a> <a href="https://www.php.cn/blog/detail/33314.html" data-index="3"><img src="https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg"></a> <a href="https://www.php.cn/app/" target="_blank"><img src="https://img.php.cn/upload/aroundimg/000/000/068/62398180bdae8398.jpg"></a> </div> <div class="btns"></div></div><script> // 遍历图片，取到dataset.index const images = document.querySelectorAll('.images > a'); //定时器开关 let lunbo = ''; // 为第一个图片，添加 active 样式 images[0].classList.add('active'); // 根据 key 的下标，添加 data-index 的标识 images.forEach((item, key) => item.dataset.index = key); // 遍历按钮，取到dataset.index const btns = document.querySelector('.btns'); // 在 btns 下面，添加 span images.forEach((item) => btns.insertAdjacentHTML('beforeEnd', `<span data-index='${item.dataset.index}'></span>`)); // 找到 images 图片中 active 样式的下标，然后 btns 根据 下标 为 span 标签 添加 active 样式 [...btns.children][[...images].find((item) => item.className == 'active').dataset.index].classList.add('active'); // 添加事件，鼠标点击后，跳转图片 btns.addEventListener('click', show, true); //添加事件，鼠标移入后，暂停轮播 btns.addEventListener('mouseover', showStop, true); //添加事件，鼠标移出后，开始轮播 btns.addEventListener('mouseout', showStart, true); function show() { if (event.target.dataset.index) { event.stopPropagation(); // 阻止事件冒泡 event.preventDefault(); // 阻止默认事件 // 移除 div.btns 下面 span 标签的 active 样式 [...btns.children].forEach((item) => item.classList.remove('active')) // 为 div.btns 下面 span 标签 添加 active 样式 event.target.classList.add('active'); //移除 div.images 下面 A 标签的 active样式 images.forEach((item) => item.classList.remove('active')); // 为 div.images 下面 A 标签 添加 active 样式 [...images].find((item) => item.dataset.index == event.target.dataset.index).classList.add('active'); } } function showStop() { event.target.dispatchEvent(new Event('click')); clearInterval(lunbo); } function showStart() { // 获取 btns 下 span 标签 const lunboNavs = document.querySelectorAll('.btns span'); let lunboArr = []; // console.log([...lunboNavs].find((item) => item.className == 'active').dataset.index); Object.keys(btns.children).forEach((item, key) => { lunboArr[key] = key + parseInt([...lunboNavs].find((item) => item.className == 'active').dataset.index); if (lunboArr[key] >= Object.keys(btns.children).length) { lunboArr[key] = key + parseInt([...lunboNavs].find((item) => item.className == 'active').dataset.index) - Object.keys(btns.children).length; } }); console.log(lunboArr); // 定时播放 lunbo = setInterval(function (arr) { let index = arr.shift(); btns.children[index].dispatchEvent(new Event('click')); arr.push(index) }, 2000, lunboArr); } showStart();</script></body></html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
