![[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
JS 自动轮播图
用视图文件index.html. JS处理文件slider.js及图片文件
示例 index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>js轮播图</title><link rel="stylesheet" href="static/css/slider.css"></head><body><div class="box"><imgsrc="static/images/1.jpg"alt=""data-index="1"class="slider active"/><img src="static/images/2.jpg" alt="" data-index="2" class="slider" /><img src="static/images/3.jpg" alt="" data-index="3" class="slider" /><img src="static/images/4.jpg" alt="" data-index="4" class="slider" /><img src="static/images/5.jpg" alt="" data-index="5" class="slider" /><div class="point-list"><!-- <span class="point active" data-index="1"></span><span class="point" data-index="2"></span><span class="point" data-index="3"></span><span class="point" data-index="4"></span><span class="point" data-index="5"></span> --></div><span class="skip prev"><</span><span class="skip next">></span></div><script src="static/js/slider.js"> </script><script>star(); //调用自动轮播图</script></body></html>
源码：
//获取轮播图所有图片var imgs = document.querySelectorAll("img");//获取小圆点组var pointList = document.querySelector(".point-list");//动态生成小圆点//圆点的数量和图片的数量是一样多imgs.forEach(function (img, index) {//遍历图片数量生成圆通数量var span = document.createElement("span");//创建一个spanif (index == 0) {//判断是否第一个圆点span.classList.add("point", "active");//生成圆点第一个的样式}span.classList.add("point"); //圆点的样式span.dataset.index = img.dataset.index; //圆点自定义的data-index等于图片的pointList.appendChild(span); //写入到文档});//获取到所有的小圆点var points = document.querySelectorAll(".point");//点击小圆点添加事件pointList.addEventListener("click", function (ev) {imgs.forEach(function (img) {//遍历图片if (img.dataset.index === ev.target.dataset.index) {//如果点击的图片的index是否等于小圆点的indeximgs.forEach(function (img) {img.classList.remove("active");//变量清除其他图片的显示});//图片的显示样式img.classList.add("active");//设置与当前图片对应的小圆点高亮显示// 因为这个功能要多处使用，这里将它声明为公共函数setPointActive(img.dataset.index);//传图片的index}});});//自定义小圆点显示样式函数function setPointActive(imgIndex) {//变量小圆点points.forEach(function (point) {point.classList.remove("active");// 清除小圆点样式});points.forEach(function (point) {if (point.dataset.index === imgIndex) {point.classList.add("active");}//设置被点击小圆点的显示样式});}// -------------------------------------翻页------------------------------//获取翻页按钮var skip = document.querySelectorAll(".skip");//添加事件skip.item(0).addEventListener("click", skipImg, false);skip.item(1).addEventListener("click", skipImg, false);// 翻页显示图片的回调方法function skipImg(ev) {//获取当前的图片var currentImg = "";imgs.forEach(function (img) {if (img.classList.contains("active")) {currentImg = img;}});if (ev.target.classList.contains("prev")) {currentImg.classList.remove("active");//为了显示出前一张，必须将当前图片的激活去掉// 将当前图片的前一张图片设置为当前图片currentImg = currentImg.previousElementSibling;if (currentImg !== null && currentImg.nodeName == "IMG") {currentImg.classList.add("active");} else {currentImg = imgs[imgs.length - 1];currentImg.classList.add("active");}}if (ev.target.classList.contains("next")) {currentImg.classList.remove("active");//为了显示出前一张，必须将当前图片的激活去掉// 将当前图片的前一张图片设置为当前图片currentImg = currentImg.nextElementSibling;if (currentImg !== null && currentImg.nodeName == "IMG") {currentImg.classList.add("active");} else {currentImg = imgs[0];currentImg.classList.add("active");}}setPointActive(currentImg.dataset.index);}var box = document.querySelector(".box");var timer = null;box.addEventListener("mouseout",function () {star();},false);function star() {// 创建一个事件模拟器var clickEvent = new Event("click");timer = setInterval(function () {skip.item(1).dispatchEvent(clickEvent);//触发模拟事件(自动翻页)}, 2000);}box.addEventListener("mouseover",function () {clearInterval(timer);// clearInterval() 来停止执行自动模拟自动触发的事件},false);
示例图 ：
源码示例：
<!DOCTYPE html><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="static/css/base.css"></head><body><div class="container"><img src="static/images/temp.png" data-src="static/images/1.png"><img src="static/images/temp.png" data-src="static/images/2.png"><img src="static/images/temp.png" data-src="static/images/3.png"><img src="static/images/temp.png" data-src="static/images/4.png"><img src="static/images/temp.png" data-src="static/images/5.png"><img src="static/images/temp.png" data-src="static/images/6.png"></div><script>// 1.获取所有图片var imgs = document.querySelectorAll(".container img");// 2.获取文档可视的高度var clientHeight = document.documentElement.clientHeight;// 3.监听滚动事件window.addEventListener("scroll",function(){lazyload(imgs,clientHeight);},false);// 4.懒加载函数function lazyload(imgs,clientHeight){//获取文档到顶部的距离var scrollTop =document.documentElement.scrollTop;//遍历图片，判断是否进入到可视区imgs.forEach(function(img){if(img.offsetTop <= clientHeight + scrollTop){// 图片到顶部的距离是否小于或者等于文档可是的高度+滚动的高度// 等于或者小于图片可视的高度和滚动的高度，图片就加载img.src = img.dataset.src;img.classList = "icon";console.log(img.classList);}});}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>经典选项卡案例</title></head><style>@import url(static/css/tabs.css);</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 class="item active" data-index=1><li><a href="">西瓜</a></li><li><a href="">苹果</a></li><li><a href="">橙子</a></li></ul><ul class="item" data-index=2><li><a href="">小米</a></li><li><a href="">华为</a></li><li><a href="">OPPO</a></li></ul><ul class="item" data-index=3><li><a href="">长城</a></li><li><a href="">五菱</a></li><li><a href="">荣威</a></li></ul></div><script type="text/javascript" src="static/js/tabs.js"></script></body></html>
// 1.获取导航var tab = document.querySelector(".tab");// console.log(tab);// 2.获取详情页var items = document.querySelectorAll(".item");// console.log(items);// 3.给导航添加点击事件(事件代理/事件委托/冒泡)tab.addEventListener('click',show,false);tab.addEventListener('mouseover',show,false);// 4.声明show()函数function show(ev){// ev.log(ev.type):事件类型，如click,mouseover// ev.target 事件的触发者// console.log(ev.type); 事件类型// console.log(ev.target); 事件触发者// console.log(ev.currentTarget); 绑定事件者//1.清除除当前高亮选项卡之外的选项卡的高亮样式ev.currentTarget.childNodes.forEach(function (item) {if (item.nodeType === 1) item.classList.remove("active");});// 2.应该将用户点击的当前选择框高亮显示ev.target.classList.add("active");// 3清空原有列表items.forEach(function(item){item.classList.remove("active");});// 4.将选择框对应的内容进行切换(根据导航和详情中的data-index)items.forEach(function(item){if(ev.target.dataset.index===item.dataset.index){item.classList.add("active");}});}
示例图：
天蓬老师