B站实现图片轮播代码2

这方法更简单一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style type="text/css">
*{
	padding:0;
}
.wrap{
	width:800px;
	height:400px;
	position:relative
}
.list{
	width:800px;
	height:400px;
	list-style:none;
	position:relative;   /*与.item中的position:absolute;一起使用，使.item叠在一起*/
}
.item{
	width:100%;
	height:100%;
	color:white;
	font-size:50px;
	position:absolute;
	opacity:0;
	transition:all .8s;   /*实现淡入淡出*/
}
.item:nth-child(1){
	background-color:#06F;
}
.item:nth-child(2){
	background-color:#660;
}
.item:nth-child(3){
	background-color:#666;
}
.item:nth-child(4){
	background-color:#93F;
}
.item:nth-child(5){
	background-color:pink;
}
.btn{
	width:50px;
	height:100px;
	position:absolute;
	top:150px;
	z-index:100;
}
#goPre{
	left:0;   /*这样不生效：float:left; */
}
#goNext{
	right:0;
}
.item.active{     /*这2个类中间不能隔开空格*/
	z-index:10;
	opacity:1;
}
.pointList{
	list-style:none;
	position:absolute;
	right:20px;
	bottom:20px;
	z-index:1000;
}
.point{
	width:14px;
	height:14px;
	margin-right:16px;
	background-color:#666;
	border-radius:100%;
	float:left;
	border:2px solid #FFF;
	cursor:pointer;
}
.point.active{
	background-color:#FC0;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>  <!--//添加data-index后，就知道1代表第1张图片-->
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
</ul>
<button type="button" class="btn" id="goPre"><</button>
<button type="button" class="btn" id="goNext">></button>
</div>

<script type="text/javascript">
var items=document.getElementsByClassName("item");  //获取列表
var points=document.getElementsByClassName("point");
var goPreBtn=document.getElementById("goPre");
var goNextBtn=document.getElementById("goNext");

var index=0; //表示第index图片在展示，意味着这张图片有.active这个类；表示第几个点在展示

var clearActive=function(){         //清掉.active功能
	for (var i=0;i<items.length;i++){
		items[i].className="item";
	}
	for (var i=0;i<points.length;i++){
		points[i].className="point";
	}
}

var goIndex=function(){  //实现图片的跳转
	clearActive();
	points[index].className="point active";
	items[index].className="item active";
}

var goNext=function(){
	if(index<4){
		index++;
	}else{
	index=0;
	}
	goIndex();
}
var goPre=function(){
	if(index>0){
		index--;
	}else{
		index=4;
	}
	goIndex();
}


goNextBtn.addEventListener("click",function(){
	goNext();
})	
goPreBtn.addEventListener("click",function(){
	goPre();
})	
for(var i=0;i<points.length;i++){
	points[i].addEventListener("click",function(){
		var pointIndex=this.getAttribute("data-index");
		index=pointIndex;
		goIndex();
	})
}
</script>
</body>
</html>
B站 实现图片轮播 代码2

猜你喜欢

B站实现图片轮播代码2
