![]()
作业一：相关知识点：
一、选项卡相关知识点：
1、document.querySeclertorAll();:返回NOdeList集合，可以直接使用NodeList.forEach(function(item,key,arr){});
2、addEventListener(‘事件行为字符串’,函数,false);
3、弹窗：alert();
4、冒泡事件：事件从下往上触发
委托事件：父级添加事件监听，判断触发事件的对象
5、ev.target:触发事件的对象；ev.type:事件的行为
6、控制class的新对象：classListclassList.add();:为标签元素添加class的样式值classList.remove():移除元素已有的class样式classList.replace('foo','bar'):将类值 “foo” 替换成 “bar”;classList.contains('active'):检索当前类属性中有无active属性值；
7、自定义html标签的自定义属性：data-index='1'
data:系统默认的
index:用户自定义的
二、懒加载相关知识点
1、元素的移动偏量：offsetTop,offsetLeft
元素在页面空间中的可见空间大小：offsetWidth,offsetHeight;（包含内边距和boder）
2、元素客户区大小：视窗大小（包含内边距）
clientHeight,clientWidth;
3、ev.target.srollTop:当前事件对象的滚动大小；
4、判断对象是否进入可视区域，对象的偏移量是否小于可视区域和滚动大小之和；
三、渐隐效果和轮播图相关知识点
1、css中透明度属性：opacity:0;
2、获取对象的生成的样式属性对象集合：window.getComputedStyle();
3、parseInt():转换为整数；
4、setInterval(function(){},1000)； 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval(timer); 被调用或窗口被关闭；
5、document.createElement();创建元素；
6、自定义html标签的自定义属性：data-index='1'
data:系统默认的i
index:用户自定义的
调用：setdata.index;
7、nextElementSibling：下一个元素；previousElmentSibling;上一个元素；
8、dispatchEvent() 方法给节点分派一个合成事件。
![]()
作业二：代码演示
一、选项卡案例
1、代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> * { margin: 0; padding: 0; } .shows { margin:auto; width: 600px; height: 500px; background-color: red; } .shows>ul { margin: auto; width: 400px; height: 50px; background-color: bisque; display: flex; justify-content: space-around; /* text-align: center; */ } .shows>ul> .li { list-style: none; text-align: center; line-height: 50px; cursor:pointer; } .shows> ul > .act{ color:coral; } .shows > .img { width: 600px; height: 500px; } .shows > .imgs > .img { width: 600px; height: 450px; /* display: none; */ display: none; } .shows> .imgs >.active{ display:block; } </style></head><body> <div class="shows"> <ul> <li class="li act" data-index="1">图片1</li> <li class="li" data-index="2">图片2</li> <li class="li" data-index="3">图片3</li> </ul> <div class="imgs"> <img src="images/1.jpg" alt="" class="img active" data-index="1"> <img src="images/2.jpg" alt="" class="img" data-index="2"> <img src="images/5.jpg" alt="" class="img" data-index="3"> </div> </div> <script> var ul=document.querySelector('ul'); uls=Array.from(ul.children); // console.log(ul); var imgs=document.querySelector('.imgs'); imgss=Array.from(imgs.children); // imgss.forEach(element => { // console.log(element); // }); // console.log(imgs); ul.addEventListener('click',showimg,false); function showimg(ev){ if(ev.target.nodeName==='LI'){ uls.forEach(function(tab){tab.classList.remove('act')}); ev.target.classList.add('act'); imgss.forEach(function(img){ // console.log(img); img.classList.remove('active') }); imgss.forEach(function(img){ if(img.dataset.index===ev.target.dataset.index){ img.classList.add('active'); } })} } </script></body></html>2、演示结果：
3、问题委托事件：委托父级式，在判断事件行为是，空白处的行为会到结果造成干扰，所有对于触发事件对象进行判断！免费干扰！
二、懒加载
1、代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div> <img src="images/temp.jpg" alt="" data-src="images/1.jpg"> <img src="images/temp.jpg" alt="" data-src="images/2.jpg"> <img src="images/temp.jpg" alt="" data-src="images/3.jpg"> <img src="images/temp.jpg" alt="" data-src="images/4.jpg"> <img src="images/temp.jpg" alt="" data-src="images/5.jpg"> <img src="images/temp.jpg" alt="" data-src="images/6.jpg"> <img src="images/temp.jpg" alt="" data-src="images/7.jpg"> <img src="images/temp.jpg" alt="" data-src="images/8.jpg"> <img src="images/temp.jpg" alt="" data-src="images/9.jpg"> <img src="images/temp.jpg" alt="" data-src="images/10.jpg"> <img src="images/temp.jpg" alt="" data-src="images/11.jpg"> <img src="images/temp.jpg" alt="" data-src="images/12.jpg"> <img src="images/temp.jpg" alt="" data-src="images/13.jpg"> <img src="images/temp.jpg" alt="" data-src="images/14.jpg"> <img src="images/temp.jpg" alt="" data-src="images/15.jpg"> <img src="images/temp.jpg" alt="" data-src="images/16.jpg"> <img src="images/temp.jpg" alt="" data-src="images/17.jpg"> <img src="images/temp.jpg" alt="" data-src="images/18.jpg"> <img src="images/temp.jpg" alt="" data-src="images/19.jpg"> <img src="images/temp.jpg" alt="" data-src="images/20.jpg"> <img src="images/temp.jpg" alt="" data-src="images/21.jpg"> </div> <script> var imgs=document.querySelectorAll('img'); // console.log(imgs); var height=document.documentElement.clientHeight; // console.log(height); window.addEventListener('scroll',function(){ var scroll=document.documentElement.scrollTop; imgs.forEach(function(img){ // console.log(img); if(img.offsetTop<=(height+scroll)){ img.src=img.dataset.src; } }) },false); </script></body></html>2效果运行图：
三、渐隐效果
1、代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>渐隐效果</title> <style> .img{ width: 400px; height: 400px; opacity: 0.5; } </style></head><body> <img src="images/1.jpg" alt="" class="img"><br> <button>显示</button> <button>隐藏</button> <script> var img=document.querySelector('img'); // console.log(img); var opacity=parseInt(window.getComputedStyle(img).opacity); var btu1=document.querySelectorAll('button').item(0); var btu2=document.querySelectorAll('button').item(1); btu1.addEventListener('click',fadeIn,false); btu2.addEventListener('click',fadeOut,false); function fadeIn(){ var timer=setInterval(function () { opacity+=0.05; img.style.opacity=opacity; if(opacity>=1){ clearInterval(timer); } },200) } function fadeOut(){ var timer=setInterval(function () { opacity-=0.05; img.style.opacity=opacity; if(opacity<=0){ clearInterval(timer); } },200) } </script> </body></html>2、运行结果
四、轮播图案例
1、代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding:0; } .shows{ width: 1000px; height: 350px; margin: auto; position: relative; } .shows > div:nth-child(2){ position: absolute; top:40%; width: 1000px; height: 350px; display: flex; justify-content: space-between; } .skip{ display: inline-block; width: 40px; height:60px; background-color: rgba(253, 253, 253,0.3); text-align: center; line-height: 60px; font-size: 30px; font-style: 500; color:rgba(0,0,0,0.2); cursor: pointer; } .skip:hover{ background-color: rgba(253, 253, 253,0.6); } .shows > .banner > .img { width: 1000px; height: 350px; display:none; } .shows > .banner > .act{ display:block; } .shows > .points{ position:absolute; top:330px; left:45%; /* width: 200px; */ /* background-color: red; */ display: flex; } .shows > .points > .point{ display: inline-block; width: 12px; height: 12px; margin: 0 5px; background-color: white; border-radius: 100%; cursor: pointer; } .shows > .points > .active{ background-color: black; } </style></head><body> <div class="shows"> <div class="banner"> <img src="banner/banner1.jpg" class="img act" alt="" data-index="1"> <img src="banner/banner2.jpg" class="img" alt="" data-index="2"> <img src="banner/banner3.jpg" class="img" alt="" data-index="3"> <img src="banner/banner4.jpg" class="img" alt="" data-index="4"> </div> <div> <span class="skip prev" ><</span> <span class="skip next">></span> </div> <div class="points"> <!-- 小圆点位置 --> </div> </div> <script> var imgs=document.querySelectorAll('img'); var points=document.querySelector('.points'); imgs.forEach(function(img,index){ var span=document.createElement('span'); if(index===0){ span.classList.add('point', 'active'); }else{ span.classList.add('point'); } span.dataset.index=img.dataset.index; points.appendChild(span); }); points=document.querySelectorAll('.point'); Array.from(points).forEach(function(point){ point.addEventListener('click',function(ev){ // console.log(ev); imgs.forEach(function(img){ if(img.dataset.index===ev.target.dataset.index){ imgs.forEach(function(img){ img.classList.remove('act'); }); img.classList.add('act'); pointBlcak(img.dataset.index); } }); },false); }) function pointBlcak(img){ points.forEach(function(point){ point.classList.remove('active'); }); points.forEach(function(point){ if(point.dataset.index===img){ 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=null; // console.log(imgs); imgs.forEach(function(img){ if(img.classList.contains('act')){ currentimg=img; } }) // console.log(ev.target); if(ev.target.classList.contains('prev')){ currentimg.classList.remove('act'); currentimg=currentimg.previousElementSibling; // console.log(currentimg); if(currentimg!==null && currentimg.nodeName==="IMG"){ currentimg.classList.add('act'); }else{ currentimg=imgs[imgs.length-1]; currentimg.classList.add('act'); } } if(ev.target.classList.contains('next')){ currentimg.classList.remove('act'); currentimg=currentimg.nextElementSibling; // console.log(currentimg); if(currentimg!==null && currentimg.nodeName==="IMG"){ currentimg.classList.add('act'); }else{ currentimg=imgs[0]; currentimg.classList.add('act'); } } pointBlcak(currentimg.dataset.index); } var shows=document.querySelector('.shows'); var timer=null; shows.addEventListener('mouseover',function(){ clearInterval(timer); },false); shows.addEventListener('mouseout',function(){ var clickEvent=new Event('click'); timer=setInterval(function(){ skip.item(0).dispatchEvent(clickEvent); },1500); },false); </script></body></html>2、运行结果图：