B站实现图片轮播代码2

心已赠人 2022-04-13 06:40 210阅读 0赞

这方法更简单一点。

<!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>  
    <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>