选项卡:
样式代码:
<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>
