![[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
添加左右翻页、当鼠标移出每隔2秒自动播放、鼠标移入停止播放
<html lang="en"><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"><!-- 图片组 --><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><!-- 小按钮,这里的小按钮应该根据图片数量自动生成 --><nav class="btns"></nav><!-- 左右翻页 --><nav class="skip"><a href="#" class="prev"><</a><a href="#" class="next">></a></nav><script>// 获取所有图片const imgs = document.querySelectorAll(".container > .imgs img");// 获取图片下方按钮const btnGrap = 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(btnGrap, 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.为轮播图添加左右翻页按钮功能skip.addEventListener("click", skipImg, false);skip.children[0].addEventListener("click", skipImg, false);function skipImg(ev) {// 当前激活的图片let currentImg = getActiveEle(imgs);// 当前图片组父元素let parentEle = currentImg.parentElement.parentElement;// 当前元素的前一个 兄弟节点：previousElentSiblinglet prevEle = currentImg.parentElement.previousElementSibling;// 当前元素的下一个兄弟节点：nextElementSiblinglet nextEle = currentImg.parentElement.nextElementSibling;// 第一张图片：firstElementChild第一个子元素let firstImg = parentEle.firstElementChild.firstElementChild;// 最后一张图片：firstElementChildm最后一个子元素let lastImg = parentEle.lastElementChild.firstElementChild;let activeImg = currentImg;// 向前翻页if (ev.target.classList.contains("prev")) {// 如果存在前一张图片，就是用它，否则就使用最后一张图片来更新它。形成循环显示的效果let activeImg =prevEle !== null ? prevEle.firstElementChild : lastImg;// 使用激活元素来同步更新图片与按钮setActiveEle(activeImg.dataset.index);}// 向后翻页if (ev.target.classList.contains("next")) {// 如果不存在下一张图片，就用第一张图片更新它let activeImg =nextEle !== null ? nextEle.firstElementChild : firstImg;setActiveEle(activeImg.dataset.index);}}// 2.让轮播图每隔2秒自动播放let timer = null;const slider = document.querySelector(".container");slider.addEventListener("mouseout", startTimer, false);slider.addEventListener("mouseover", clearTimer, false);function startTimer() {// 创建自定义事件对象const clickEvent = new Event("click");timer = setInterval(() => skip.children[0].dispatchEvent(clickEvent),2000);}// 清除定时器function clearTimer() {clearInterval(timer);}</script></div></body></html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选项卡</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;color: #555;}a:hover {text-decoration: underline;color: red;}li {list-style: none;line-height: 1.6em;}li:hover {cursor: default;}.tabs {width: 300px;height: 300px;margin: 30px;background-color: #e6e6e6;display: flex;flex-direction: column;border-radius: 10px;}.tab {height: 36px;display: flex;}.tab li {flex: auto;text-align: center;line-height: 36px;background-color: rgb(0, 248, 153);border-radius: 10px;}.tab li.active {background-color: lightcyan;transition: .3s;}.tab li:hover {cursor: pointer;}/* 默认所有选项卡只有一个显示,其它隐藏 */.item {padding: 20px;display: none;}.item.active {display: block;}</style></head><body><div class="tabs"><!-- 导航 --><ul class="tab"><li class="active" data-index="1">最新</li><li data-index="2">热门</li><li data-index="3">近期</li></ul><!-- 内容 --><ul data-index="1" class="item active"><li><a href="">新加坡外交家：美国的利益已被富豪绑架</a></li><li><a href="">外交部：蓬佩奥为散播政治病毒煞费苦心</a></li><li><a href="">18岁离家远行，他们的目的地有点特别</a></li><li><a href="">了不起的你——三张照片背后的泪目故事</a></li></ul><ul data-index="2" class="item"><li><a href="">憋气30秒可以测试肺部健康 这是真的吗？</a></li><li><a href="">李子柒做的泡菜，跟韩国有关系么？</a></li><li><a href="">疫情时间线或改写？多国在废水中发现新冠病毒痕迹</a></li><li><a href="">国药控股董事长李智明因“个人原因”辞职</a></li></ul><ul data-index="3" class="item"><li><a href="">旗袍改中华风lo裙 可用作桃源恋歌打歌服</a></li><li><a href="">2020腾讯娱乐年度盛典 年度荣誉由你来推</a></li><li><a href="">36岁詹皇冲MVP迎三大利好</a></li><li><a href="">煤改气改成了电褥子？网友吐槽农村取暖痛点</a></li></ul><script>// 事件代理const tab = document.querySelector(".tab");// 获取三个列表const items = document.querySelectorAll(".item");tab.onclick = ev => {// 1.清空之前所有处于激活状态的选项，并将当前点击对象激活[...tab.children].forEach(item => item.classList.remove("active"));ev.target.classList.add("active");// 2.根据自定义属性data-index找到对应的列表显示出来items.forEach(item => item.classList.remove("active"));[...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");};</script></div></body></html>
