JS原生态实现轮播图（焦点图）

为什么要自己写轮播图：网上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)

原文链接：https://blog.csdn.net/weixin_44841312/article/details/117285418