JavaScript轮播图学习和例题

2022-11-01 222

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片。这些图片统称为轮播图，这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面。下图截自京东的购物页面。

某购物网站的轮播图

虽然现在轮播图的主流做法是用swiper来实现，但是轮播图是js学习里面很经典的案例之一，了解和学习轮播图的原理和实现，对于js的代码理解有很大的帮助。

题目要求

html代码

<!DOCTYPE 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：在鼠标(移入/移出)元素时触发(只触发一次)，不支持冒泡，不包含子元素的区域(移动到其子元素身上不会触发事件)