收藏
天蓬老师批改状态：合格
老师批语：
以老师的dom为基础写的作业
<!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);})(btnGroup, imgs.length);// 调用创建小按钮的函数//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) {console.log(item);item.classList.add("active");}});});}// 为每一个小按钮添加事件// btns.forEach((btn) =>// btn.addEventListener("click", (ev) =>// setActiveEle(ev.target.dataset.index)// )// );btnGroup.addEventListener("click", (ev) =>setActiveEle(ev.target.dataset.index));// btns.forEach(function (btn) {// btn.onclick = function (ev) {// setActiveEle(ev.target.dataset.index);// };// });// const btns =// 作业:// 1. 为翻页按钮添加功能skip.addEventListener("click", (ev) => {let activeIndex = getActiveEle(imgs).dataset.index;if (ev.target.className === "prev") {console.log("点击了上一个");// 获取当前激活的图片的dataindex,如果dataindex=1,重置dataindex=5// 激活dataindex-1的图片为激活,if (activeIndex == 1) activeIndex = 5;activeIndex--;} else {// 获取当前激活的图片的dataindex,如果dataindex=4,重置dataindex=1// 激活dataindex+1的图片为激活,if (activeIndex == 4) activeIndex = 0;activeIndex++;}setActiveEle(`${activeIndex}`);});// 2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放// mouseenter , mouseleave 事件来做// mouseout带了子元素,弃用let imgGroup = document.querySelector(".container");// const ev = new Event("click");const nextBtn = document.querySelector(".container .next");let intervalID;mouseOutHandler();function mouseOverHandler() {console.log("鼠标移入");// 清理自动点击clearInterval(intervalID);}function mouseOutHandler() {console.log("鼠标移出");intervalID = setInterval("nextBtn.click()", 2000);}imgGroup.addEventListener("mouseleave", mouseOutHandler);imgGroup.addEventListener("mouseenter", mouseOverHandler);// 3. 上节课的选项卡, 懒加载二选一</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
