![[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
classList.add() 增加样式
classList.remove() 删除样式
classList.replace()替换样式
比如，class=”data-index”，以data-自定义属性名 的方式命名，
读取自定义属性需要用到 dataset.自定义属性名
示例代码如下
<div class=".box"><ul class="tab"><li data-index="1" class="active">html教程</li><li data-index="2">JS小结</li><li data-index="3">php代码</li></ul><ul data-index="1" class="item active"><li>html教程1</li><li>html教程2</li><li>html教程3</li></ul><ul data-index="2" class="item"><li>JS小结1</li><li>JS小结1</li><li>JS小结1</li></ul><ul data-index="3" class="item"><li>php代码1</li><li>php代码1</li><li>php代码1</li></ul></div><script>const tab = document.querySelector(".tab");const item = document.querySelectorAll('.item');console.log(item);tab.onclick = (ev)=>{[...tab.children].forEach(item=>item.classList.remove('active'));ev.target.classList.add('active');item.forEach(item=>item.classList.remove("active"));[...item].filter(item=>item.dataset.index === ev.target.dataset.index)[0].classList.add('active');};</script>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><link rel="stylesheet" href="banner/style.css" /></head><body><div class="container"><!-- 1. 图片组 --><nav class="imgs"><a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a><a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a><a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a><a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a></nav><!-- 2. 图片小按钮 --><nav class="btns"><!-- 这些小按钮应该根据图片数量自动生成 --><!-- <a href="" data-index="1" class="active"></a><a href="" data-index="2"></a><a href="" data-index="3"></a><a href="" data-index="4"></a> --></nav><!-- 3. 翻页 --><nav class="skip"><a href="#" class="prev"><</a><a href="#" class="next">></a></nav></div><script>// 所有图片const imgs = document.querySelectorAll(".container > .imgs img");// 按钮组const btnGroup = document.querySelector(".container > .btns");// 翻页按钮const skip = document.querySelector(".container > .skip");// 创建出一组与图片数量对应的小按钮function autoCreateBtns(ele, imgLength) {const frag = document.createDocumentFragment();for (let i = 0; i < imgLength; i++) {const a = document.createElement("a");a.href = "#";a.dataset.index = i + 1;if (i === 0) a.classList.add("active");frag.appendChild(a);}ele.appendChild(frag);}// 调用创建小按钮的函数autoCreateBtns(btnGroup, imgs.length);// 为刚刚生成的小按钮们添加点击事件const btns = document.querySelectorAll(".container > .btns > *");// 下面声明二个公共函数// 1. 获取激活的元素function getActiveEle(eles) {let activities = [...eles].filter(img => img.classList.contains("active"));return activities.shift();}// 2. 设置激活的元素,根据按钮索引更新正在显示的图片function setActiveEle(btnIndex) {[imgs, btns].forEach(arr => {// 将之前的状态全部重置到初始化(清空)getActiveEle(arr).classList.remove("active");arr.forEach(item => {if (item.dataset.index === btnIndex) {item.classList.add("active");}});});}// 为每一个小按钮添加事件btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));// 1. 为翻页按钮添加功能// 1.1 获取当前激活元素的上一个元素自定义属性序号function prevActiveEle(eles) {let indexNumber = getActiveEle(eles).dataset.index;if (indexNumber == 1) {return String(eles.length);} else {return String(indexNumber - 1);}}// 1.2 获取当前激活元素的下一个元素自定义属性序号function nextActiveEle(eles) {let indexNumber = getActiveEle(eles).dataset.index;if (indexNumber == eles.length) {return 1 + "";} else {return String(Number(indexNumber) + 1);}}// 1.3 为上翻页按钮添加点击事件skip.children[0].addEventListener('click',()=>setActiveEle(prevActiveEle(imgs)));// 1.4 为下翻页按钮添加点击事件skip.children[1].onclick =()=>setActiveEle(nextActiveEle(imgs));// 2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放// 2.1 创建派发事件const evclick = new Event('click');// 2.2 使用间歇式定时器，给下翻页按钮添加事件派发,间隔2秒let timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);// 2.3 获取图片组的父元素const imgsBox = document.querySelector(".container");// 2.4 当鼠标移入时自动停止播放imgsBox.onmouseover=()=>clearInterval(timer);// 2.5 当鼠标移除时继续自动播放imgsBox.onmouseout=()=>timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);</script></body></html>