收藏
天蓬老师批改状态：合格
老师批语：
<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;}.tab {height: 36px;display: flex;}.tab li {flex: auto;text-align: center;line-height: 36px;background-color: #fff;}.tab li.active {background-color: #e6e6e6;}.tab li:hover {cursor: pointer;}.item { //默认所有选项卡只有一个显示,其它隐藏padding: 20px;display: none;}.item.active {display: block;}</style><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"> //detail<li><a href="">合肥GDP破万亿</a></li><li><a href="">京东方第10代生产线</a></li><li><a href="">德国大众(安徽)正式成立</a></li></ul><ul data-index="2" class="item"><li><a href="">北京禁止春节前后举办群众性活动</a></li><li><a href="">目前疫情仍处于完全可控范围</a></li><li><a href="">重庆6岁女童屁股被打伤</a></li></ul><ul data-index="3" class="item"><li><a href="">特朗普支持者闯国会干了啥</a></li><li><a href="">大批日本居民在东京游行支持特朗普</a></li><li><a href="">新加坡总理李显龙公开接种新冠疫苗</a></li></ul></div><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找到对应的列表并显示出来 NodeList对象内置了forEach接口items.forEach(item => item.classList.remove("active"));[...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add("active");};</script></body>
<title>轮播图</title><link rel="stylesheet" href="banner/style.css" /><body><div class="container">//1.图片组<nav class="imgs"><nav class="imgs"><a href="#"><img src="banner/banner1.jpg" alt="" data-index="1" class=""/></a><a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" class="active"/></a><a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" class=""/></a><a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" class=""/></a></nav></nav>//2.图片小按钮<nav class="btns"></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 = "#"; // #: 防止默认行为，更加规范用 ev.preventDefault();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 > *"); // 为刚刚生成的小按钮添加点击事件function getActiveEle(eles) { // 1. 获取激活的元素let activities = [...eles].filter((img) =>img.classList.contains("active"));return activities.shift();}function setActiveEle(btnIndex) { // getActiveEle(imgs);[imgs, btns].forEach((arr) => { // 2. 设置激活的元素// 将之前的状态全部重置到初始化(清空)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),false));//为每个翻页按钮添加事件完成图片翻页(兄弟节点的处理)skip.addEventListener("click", skipImg, false);// 单独写一个事件监听器,为后面的事件自动派发做准备skip.children[0].addEventListener("click", skipImg, false);// 将前后翻页,使用一个回调统一处理function skipImg(ev) {// 当前激活的图片,实际上这里用不到它,而应该用它的父级<a>来判断是否存在兄弟节点let currentImg = getActiveEle(imgs);// 当前图片组父元素,注意<img>父级是<a>,<a>的父级才是需要的父节点let parentEle = currentImg.parentElement.parentElement;// 当前元素的前一个兄弟节点:previousElementSibling;let prevEle = currentImg.parentElement.previousElementSibling;// 当前元素的下一个兄弟节点:nextElementSibling;let nextEle = currentImg.parentElement.nextElementSibling;// 第一张图片, firstElementChild第一个子元素let firstImg = parentEle.firstElementChild.firstElementChild;// 最后一张图片, firstElementChild, 最后一个子元素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秒自动播放(定时器,事件自动派发)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),4000);}//清除定时器function clearTimer() {clearInterval(timer);}</script></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
