<!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;}/* 容器样式 */.container {/* border: 1px solid; */width: 90%;height: 20rem;position: relative;top: 2rem;margin: auto;}/* 按钮组样式 */.container > .btnsGroup {width: 10rem;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;}.container > .btnsGroup > a {display: inline-block;border: 0.5rem solid gray;border-radius: 50%;margin: 0.5rem;}.container > .btnsGroup > a:hover {cursor: pointer;}.container > .btnsGroup > .active {border-color: black;}/* 左右按钮样式 */.container > .changeimgs > span {position: absolute;top: 7.5rem;display: block;/* border: 1px solid; */width: 3rem;height: 5rem;text-align: center;line-height: 5rem;background-color: ghostwhite;font-weight: bolder;opacity: 0.3;}.container > .changeimgs > .next {right: 0;}/* 图片样式 */.container > .imgsGroup img {display: none;width: 100%;height: 20rem;}.container > .imgsGroup > .active {display: block;}</style></head><body><div class="container"><!-- 图片组 --><div class="imgsGroup"></div><!-- 按钮组 --><div class="btnsGroup"></div><!-- 左右按钮 --><div class="changeimgs"><span class="prev" onclick="prev(this);"><</span><span class="next" onclick="next();">></span></div></div><script>let imgs = ["images/banner1.jpg","images/banner2.jpg","images/banner3.jpg","images/banner4.jpg",];// 按钮组let btnsGroup = document.querySelector(".btnsGroup");// 图片组let imgsGroup = document.querySelector(".imgsGroup");//load,窗口加载完成后自动执行window.onload = function () {createImgs(imgsGroup, imgs.length);createBtns(btnsGroup, imgs.length);};//插入图片function createImgs(parent, length) {//创建临时的文档片段，把图片先插入文档片段，然后最终一次性渲染页面let frag = document.createDocumentFragment();for (let i = 0; i < length; i++) {let im = document.createElement("img");if (i == 0) {im.classList.add("active");}im.dataset.index = `${i + 1}`;im.src = imgs[i];frag.append(im);}imgsGroup.append(frag);}//插入按钮function createBtns(parent, length) {//创建临时的文档片段，把按钮先插入文档片段，然后最终一次性渲染页面let frag = document.createDocumentFragment();for (let i = 0; i < length; i++) {let btn = document.createElement("a");if (i == 0) {btn.classList.add("active");}btn.dataset.index = i + 1;btn.onclick = showImgs;frag.append(btn);}btnsGroup.append(frag);}//点击小按钮切换图片function showImgs(ev) {let imgArr = imgsGroup.querySelectorAll("img");let btnArr = btnsGroup.querySelectorAll("a");btnArr.forEach(function (item) {if (item.classList.contains("active"))item.classList.remove("active");});imgArr.forEach(function (items) {if (items.classList.contains("active"))items.classList.remove("active");if (items.dataset.index == ev.target.dataset.index)items.classList.add("active");});ev.target.classList.add("active");}// 左边按钮function prev() {let currentImg = imgsGroup.querySelector("img.active");let currentBtn = btnsGroup.querySelector("a.active");currentImg.classList.remove("active");currentBtn.classList.remove("active");// 获取上一个兄弟元素，如果不为空就给他们active属性let prevImg = currentImg.previousElementSibling;let prevBtn = currentBtn.previousElementSibling;if (prevImg !== null && prevBtn !== null) {prevImg.classList.add("active");prevBtn.classList.add("active");} else {imgsGroup.querySelector("img:last-of-type").classList.add("active");btnsGroup.querySelector("a:last-of-type").classList.add("active");}}//右边按钮function next() {let currentImg = imgsGroup.querySelector("img.active");let currentBtn = btnsGroup.querySelector("a.active");currentImg.classList.remove("active");currentBtn.classList.remove("active");// 获取下一个兄弟元素，如果不为空，就给active属性let prevImg = currentImg.nextElementSibling;let prevBtn = currentBtn.nextElementSibling;if (prevImg !== null && prevBtn !== null) {prevImg.classList.add("active");prevBtn.classList.add("active");} else {imgsGroup.querySelector("img:first-of-type").classList.add("active");btnsGroup.querySelector("a:first-of-type").classList.add("active");}}//自动播放// 定时器，就是一个整数，用来标识一个定时任务let timer = null;let clickEvent = new Event("click");let container = document.querySelector(".container");container.addEventListener("mouseover", stopPlay);container.addEventListener("mouseout", startPlay);function startPlay(ev) {timer = setInterval(function () {document.querySelector(".changeimgs .next").dispatchEvent(clickEvent, next);}, 2000);}function stopPlay() {clearInterval(timer);}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
