![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
作业标题：0715作业
作业内容：模仿课堂源码, 自己动手试着完成轮播图
轮播图
<!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><link rel="stylesheet" href="style.css" /></head><body><div class="container"><!--1. 图片组 --><div class="img-group"></div><img src="" alt="" /><!-- 2.图片下部的小按钮 --><div class="btn-group"></div><!-- 3.翻页按钮 --><div class="skip"><a class="prev" onclick="prevImg()"><</a><a class="next" onclick="nextImg()">></a></div></div><script>const banners = ["banner/images/banner1.jpg","banner/images/banner2.jpg","banner/images/banner3.jpg","banner/images/banner4.jpg",];//图片组const imgGroup = document.querySelector(".container > .img-group");//按钮组const btnGroup = document.querySelector(".container > .btn-group");//load:窗口加载完成自动执行：自动将所有轮播图加载出来，并自动生成与轮播图数量相同的小按钮window.onload = () => {//1.生成轮播图所有图片createImgs(imgGroup, banners.length);//2.生成与轮播图数量对应的小按钮createBtns(btnGroup, banners.length);};//生成图片function createImgs(parent, length) {//正确的做法，应该是将所有图片，先在内存中创建，然后统一的插入到页面中,这样就只需要渲染一次//文档片断元素const frag = document.createDocumentFragment();for (let i = 0; i < length; i++) {const img = document.createElement("img");img.src = banners[i];img.alt = `banner${i + 1}`;//为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定img.dataset.index = `${i + 1}`;if (i === 0) img.classList.add("active");//内容中执行了四次frag.append(img);}//页面中只渲染了一次，效率大幅提高parent.append(frag);}//生成按钮function createBtns(parent, length) {//文档片断元素const frag = document.createDocumentFragment();for (let i = 0; i < length; i++) {const span = document.createElement("span");//为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定span.dataset.index = `${i + 1}`;if (i === 0) span.classList.add("active");//内容中执行了四次span.onclick = showImgs;frag.append(span);}//页面中只渲染了一次，效率大幅提高parent.append(frag);}//按钮事件function showImgs(ev) {//1.获取所有图片和按钮const imgArr = imgGroup.querySelectorAll("img");const btnArr = btnGroup.querySelectorAll("span");//2.因为我们要根据用户的点击确定当前应该显示哪一个，所以应该将之前的激活全部取消掉//但是我们又不知道当前是哪个处于激活状态，全部过一遍// btnArr.forEach((item) => {// if (item.classList.contains("active")) item.classList.remove("active");// });// imgArr.forEach((item) => {// if (item.classList.contains("active")) item.classList.remove("active");// });//将上面两段代码合并[btnArr, imgArr].forEach((items) => {items.forEach((item) => {if (item.classList.contains("active"))item.classList.remove("active");});//3.再给当前正在点击的按钮添加激活，然后再根据当前的按钮确定应该显示哪一张图片ev.target.classList.add("active");imgArr.forEach((img) => {//这张应该显示的图片的data-index应该与按钮的data-index相等，就显示出来if (ev.target.dataset.index === img.dataset.index) {img.classList.add("active");}});});}//向前翻页事件function prevImg() {//1.当前的图片和当前的按钮const currentImg = imgGroup.querySelector("img.active");const currentBtn = btnGroup.querySelector("span.active");//2.去掉当前图片和按钮的激活方式currentImg.classList.remove("active");currentBtn.classList.remove("active");//3.获取当前图片和按钮的前一个兄弟元素const prevImg = currentImg.previousElementSibling;const BtnImg = currentBtn.previousElementSibling;//4.判断，如果存在前一张图片，就设置为激活if (prevImg !== null && BtnImg !== null) {prevImg.classList.add("active");BtnImg.classList.add("active");} else {//将最后一张图片设置为激活显示，实现循环显示imgGroup.lastElementChild.classList.add("active");btnGroup.lastElementChild.classList.add("active");}}//向后翻页事件function nextImg() {//1.当前的图片和当前的按钮const currentImg = imgGroup.querySelector("img.active");const currentBtn = btnGroup.querySelector("span.active");//2.去掉当前图片和按钮的激活方式currentImg.classList.remove("active");currentBtn.classList.remove("active");//3.获取当前图片和按钮的前一个兄弟元素const nextImg = currentImg.nextElementSibling;const nextBtn = currentBtn.nextElementSibling;//4.判断，如果存在前一张图片，就设置为激活if (nextImg !== null && nextBtn !== null) {nextImg.classList.add("active");nextBtn.classList.add("active");} else {//将最后一张图片设置为激活显示，实现循环显示imgGroup.firstElementChild.classList.add("active");btnGroup.firstElementChild.classList.add("active");}}//自动播放//事件派发器dispatchEventlet timer = null;let clickEvent = new Event("click");const contains = document.querySelector(".container");//鼠标移入时停止自动播放，移出时自动播放contains.addEventListener("mouseover", stopPlay);contains.addEventListener("mouseout", autoPlay);//自动播放function autoPlay(ev) {//ev:事件对象，在方法总是有效的timer = setInterval((ev) => {document.querySelector(".skip .next").dispatchEvent(clickEvent, nextImg);}, 2000);}//自动停止function stopPlay() {clearInterval(timer);}</script></body></html>
