为什么要自己写轮播图:网上copy的代码放到自己的代码里面,由于它的定位问题导致我原有界面的布局全部打乱。所以需要自己写一个轮播图。
这里提供视频,看完视频后你可以选择跟着视频一起写,也可以参考我已经写好的代码,进行修改。
视频链接:https://www.bilibili.com/video/BV16W41127aQ?from=search&seid=6101400960869637959
下面的代码没有加注释,建议看视频
一,HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="ie=edge">
<meta name=keywords content="">
<meta name=description content="xxxxxxxxxxxxxxxxx平台">
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="c-banner">
<div class="wrap">
<ul>
<li class="item active" ><img class="lunbo" src="img/top1.jpg"></li>
<li class="item"><img class="lunbo" src="img/top2.jpg"></li>
<li class="item"><img class="lunbo" src="img/top3.jpg"></li>
</ul>
</div>
<div id="nextImg" >
<img src="img/nexImg.png" />
</div>
<div id="preImg">
<img src="img/preImg.png" />
</div>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
</ul>
</div>
</body>
</html>
<script src="js/index.js" type="text/javascript"></script>
二,CSS部分
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.list{
width:100%;
list-style:none;
}
.item{
height:100%;
width:100%;
position:absolute;
opacity: 0;
transition: all .5s;
}
.wrap{
top: 100px;
height:100%;
width:100%;
position: relative;
}
#nextImg{
position:absolute;
height: 100px;
width: 40px;
top: 50%;
right: 0px;
z-index: 11;
cursor: pointer;
}
#preImg{
position:absolute;
height: 100px;
width: 40px;
top: 50%;
left: 0px;
z-index: 11;
cursor: pointer;
}
.lunbo{
height:500px;
width:100%;
}
.item.active{
z-index: 10;
opacity: 1;
}
.pointList{
position: relative;
left: 45%;
top:530px;
z-index: 11;
list-style: armenian;
}
.point{
width: 25px;
height: 25px;
float: left;
background-color: grey;
margin-right: 20px;
border-radius:100% ;
border:2px solid white ;
cursor: pointer;
}
.point.active{
background-color: white;
}
三,JS部分
let item=document.getElementsByClassName('item');
let point=document.getElementsByClassName('point');
let goPreBtn=document.getElementById('preImg');
let goNextBtn=document.getElementById('nextImg');
var time=0;
var index=0;//轮播图索引
var clearActive=function(){//清除要显示的图的标记
for(let i=0; i<item.length;i++){
item[i].className='item';
}
for(let j=0; j<point.length;j++){
point[j].className='point';
}
}
var goIndex=function(){//给要显示的轮播图加标记
clearActive();
time=0;
item[index].className='item active';
point[index].className='point active';
}
var goNext=function(){//改变索引进行下一页
if(index<item.length-1){
index++;
}
else{
index=0;
}
goIndex();
}
var goPre=function(){//改变索引进行上一页
if(index>0){
index--;
}
else{
index=item.length-1;
}
goIndex();
}
goNextBtn.addEventListener('click',function(){//把函数绑定到图标上
goNext();
})
goPreBtn.addEventListener('click',function(){
goPre();
})
for(let i=0;i<point.length;i++){
point[i].addEventListener('click',function(){
index=this.getAttribute('data-index');
time=0;
goIndex();
})
}
setInterval(function(){
time++;
if(time==20){
goNext();
}
if(time>20){
time=0;
}
},100)