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

我不是女神ヾ 2022-10-16 00:59 166阅读 0赞

为什么要自己写轮播图：网上copy的代码放到自己的代码里面，由于它的定位问题导致我原有界面的布局全部打乱。所以需要自己写一个轮播图。

这里提供视频，看完视频后你可以选择跟着视频一起写，也可以参考我已经写好的代码，进行修改。

视频链接：[https://www.bilibili.com/video/BV16W41127aQ?from=search&seid=6101400960869637959][https_www.bilibili.com_video_BV16W41127aQ_from_search_seid_6101400960869637959]

下面的代码没有加注释，建议看视频

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg0MTMxMg_size_16_color_FFFFFF_t_70][]

### 一，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部分

[https_www.bilibili.com_video_BV16W41127aQ_from_search_seid_6101400960869637959]: https://www.bilibili.com/video/BV16W41127aQ?from=search&seid=6101400960869637959
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg0MTMxMg_size_16_color_FFFFFF_t_70]: /images/20221014/3c24b33e46a54c40a557d3e79f06b328.png