<!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"><imgsrc="https://img.php.cn/upload/aroundimg/000/000/001/62ea76c2b5ace916.png"></a><a href="https://www.php.cn/k.html?1" target="_blank"><imgsrc="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"><imgsrc="https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg"></a><a href="https://www.php.cn/app/" target="_blank"><imgsrc="https://img.php.cn/upload/aroundimg/000/000/068/62398180bdae8398.jpg"></a></div><div class="btns"></div></div><script>// 遍历图片，取到dataset.indexconst 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.indexconst btns = document.querySelector('.btns');// 在 btns 下面，添加 spanimages.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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
