某购物网站的轮播图
虽然现在轮播图的主流做法是用swiper来实现，但是轮播图是js学习里面很经典的案例之一，了解和学习轮播图的原理和实现，对于js的代码理解有很大的帮助。
题目要求
html代码
<html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>第三题-无缝轮播</title><linkrel="stylesheet"href=""><linkrel="stylesheet"type="text/css"href="css/lunbo.css"></head><body><divclass="banner"id="banner"><ulclass="clear"style="left:-100%"><li><imgsrc="img/index-banner3.jpg"></li><li><imgsrc="img/index-banner1.jpg"></li><li><imgsrc="img/index-banner2.jpg"></li><li><imgsrc="img/index-banner3.jpg"></li><li><imgsrc="img/index-banner1.jpg"></li></ul><divid="left"><divclass="s1"></div></div><divid="right"><divclass="s2"></div></div><divid="pageNav"></div></div><scriptsrc="js/index.js"></script></body></html>
css代码
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{ margin:0; padding:0; } ul,ol{ list-style:none; } img{ display:block; } .clear:after{ content:""; display:block; clear:both; } .banner{ position:relative; width:100%; overflow:hidden; } .bannerul{ position:relative; width:500%; } .bannerulli{ width:20%; float:left; } .bannerulliimg{ width:100%; } #left,#right{ position:absolute; top:50%; margin-top:-25px; width: 50px; height:50px; cursor:pointer; background-color: rgba(0,0,0,0.4); } .s1{ position: absolute; top:12px; right: 12px; display: block; width: 20px; height:20px; border-top:4pxsolidwhite; border-right:4pxsolidwhite; transform: rotate(-135deg); } .s2{ position: absolute; top:12px; right: 12px; display: block; width: 20px; height:20px; border-top:4pxsolidwhite; border-right:4pxsolidwhite; transform: rotate(45deg); } #left{ left:0; } #right{ right:0; } #left:hover,#right:hover{ background-color: rgba(0,0,0,0.8); } #pageNav{ position: absolute; bottom:20px; left:50%; transform:translateX(-50%); } #pageNava{ display:inline-block; margin:05px; width:15px; height:15px; background-color: #fff; border-radius:50%; } #pageNava.cur{ background-color: orange; }
js代码
// 获取元素//（1）根据标签获取元素varbanner=document.getElementById("banner"), // ul=banner.____(1)______("ul")[0],ul=banner.getElementsByTagName("ul")[0], // li=ul.____(1)______("li"),li=ul.getElementsByTagName("li"), leftBtn=document.getElementById("left"), rightBtn=document.getElementById("right"), pageNav=document.getElementById("pageNav"), index=0, timer=null, animate=false; // 追加小圆点for(vari=0;i<li.length-2;i++){ //创建元素// var pageA=____(2)______("a");varpageA=document.createElement("a"); if(i==0){ //设置类名// pageA.___(3)____="cur";pageA.className="cur"; } //追加节点// pageNav.____(4)___(pageA);//pageNav.append(pageA);pageNav.appendChild(pageA); } // 给小圆点绑定点击事件// var aBtn=pageNav.____(1)______("a");varaBtn=pageNav.getElementsByTagName("a"); for(varj=0;j<aBtn.length;j++){ //记录索引值// _____(5)_____;aBtn[j].index=j; aBtn[j].onclick=function(){ if(animate){ return } //计算偏移量// var offset=___(6)_______;varoffset=(this.index-index) *-100; //传参-当前点击对象的索引值// btnShow(___(7)____);btnShow(this.index); imgShow(offset); index=this.index; } } // 小圆点点亮functionbtnShow(num){ for(vari=0;i<aBtn.length;i++){ // aBtn[i].___(3)____="";aBtn[i].className=""; } // aBtn[num].___(3)____="cur";aBtn[num].className="cur"; } // 切换图functionimgShow(offset){ animate=true; varspeed=offset/10; varnewLeft=parseInt(ul.style.left)+offset; vargo=function(){ if(speed<0&&parseInt(ul.style.left)>newLeft||speed>0&&parseInt(ul.style.left)<newLeft){ ul.style.left=parseInt(ul.style.left)+speed+"%"; //延时计时器// ___(8)____(go,50);setTimeout(go,50); }else{ ul.style.left=(index+1)*(-100)+"%"; animate=false; } } go(); } // 给左右箭头绑定点击事件leftBtn.onclick=function(){ if(animate){ return } index--; if(index<0){ index=aBtn.length-1; } btnShow(index); imgShow(100); } rightBtn.onclick=function(){ if(animate){ return } index++; if(index==aBtn.length){ index=0; } btnShow(index); imgShow(-100); } // 自动轮播functionlunbo(){ rightBtn.onclick(); } timer=setInterval(lunbo,3000); // 鼠标经过Banner区域清除计时器banner.onmouseover=function(){ // ____(9)_______;clearInterval(timer); } // 鼠标离开继续自动轮播// banner.____(10)____=function(){banner.onmouseout=function(){ console.log(1); timer=setInterval(lunbo,3000); }
题目解析
第一题 根据标签获取元素可以知道使用getElementsByTagName() 方法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
第二题 创建元素用createElement() 方法，不要漏了document
createElement() 方法通过指定名称创建一个元素
第三题 设置类名直接用className()
className 属性设置或返回元素的 class 属性。
第四题 追加节点用appendChild() 或append()都可以
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。(多用于jQuery)
第五至七题
我觉得是这道题的一个难点，要充分理解代码的索引值和轮播图图片移动时的偏移量。
获取记录索引值先要给数组中每一个元素添加索引(.index),区分index和this.index的含义，通过阅读代码，求出offset偏移量的值。
第八题 、第九题定时器方法
设置setTimeout()方法
鼠标经过Banner区域清除计时器，直接使用clearInterval()方法
第十题 鼠标离开继续自动轮播
- 上面代码出现了.onmouseover的事件，我们应该可以想到配套的onmouseout()事件
- 需要注意的是区别onmouseover、onmouseout和onmouseenter、onmouseleave的不同之处
- onmouseover、onmouseout和onmouseenter、onmouseleave的区别对比
- onmouseover和onmouseout：在鼠标指针(移动到/移出)指定的对象时发生，支持冒泡，含子元素区域，鼠标经过时自身或子元素都触发事件，每经过一次都触发该事件。
- onmouseenter和onmouseleave：在鼠标(移入/移出)元素时触发(只触发一次)，不支持冒泡，不包含子元素的区域(移动到其子元素身上不会触发事件)
运行效果
https://ucc.alicdn.com/images/user-upload-01/51368848aafb40a783857560ffda6d15.gif
