原生JS实现轮播图（HTML+CSS+JS）

这是我的第一篇文章，记录网页中常规的轮播图制作，防止以后会忘记，同时也可以分享给其他人看。

HTML和CSS部分

HTML的架构

由于是我自己用来练习用的，所以图片和样式会比较少。

<div class="box c">
	<a href="javascript:;" class=".arrow_l">&gt;</a>
	<a href="javascript:;" class=".arrow_r">&lt;</a>
	<ul class="showbox">
		<li><img src="image/n1.jpg" alt="广告1" /></li>
		<li><img src="image/n2.jpg" alt="广告2" /></li>
		<li><img src="image/n3.jpg" alt="广告3" /></li>
	</ul>
	<ol class="circle"></ol>
</div>

这里采用<ul></ul>标签作为轮播移动的对象，移动每个图片就操作这个对象就可以了。<a></a>是左右两个箭头。外面的div是固定位置，通常可以作为版心存在，下面的有序列表标签<ol></ol>用来当作下面的小圆点的框框，小圆点当然还是用<li></li>，当然上面没有相应的标签，我是通过JS动态添加，方便以后代码的维护。

CSS样式

首先肯定是要去除一些默认样式

* {
   
	padding: 0;
	margin: 0;
}
li {
   
	list-style-type: none;
	float: left;
}
a {
   
	text-decoration: none;
}

整个版心部分

.c {
   
	width: 400px;
	margin: 100px auto;
}
.box {
   
	position: relative;
	height: 250px;
	overflow: hidden;
}

然后是负责移动和存放图片的<ul>

.c ul {
   
	position: absolute;
	top: 0;
	left: 0;
	width: 1600px;
	height: 250px;
}

需要注意的是<ul>的宽度需要足够大，以让图片水平排列，比如我这里的1600px，或者500%，都行，需要比全部图片加在一起大。

哦，忘记了还有里面的<li>和<img>

img {
   
	width: 400px;
	height: 250px;
}

<li>就不用设置了，由<img>自动撑开

接下来是那两 一对箭头

.box a {
   
	display: none;
	width: 20px;
	height: 40px;
	z-index: 5;
	background-color: #0f0;
	line-height: 40px;
	text-align: center;
}
.arrow_l {
   
	position: absolute;
	left: 0;
	top: calc(50% - 20px);
}
.arrow_r {
   
	position: absolute;
	right: 0;
	top: calc(50% - 20px);
}

这里用到了calc()函数，这里第一个参数是父元素的宽度，在减去本身的宽度（高度）的一半，就居中了。需要注意的另外一点是中间的运算符两边需要留有空格。

再加一个鼠标移入框框时箭头出现，移出时箭头也消失

.box:hover .arrow_l,
.box:hover .arrow_r {
   
	display: block;
}

最后当然是我们的小圆点们了~~

.circle {
   
	position: absolute;
	left: calc(50% - 75px);
	top: 210px;
	display: flex;
	justify-content: center;
	width: 150px;
	height: 30px;
	background-color: rgb(41, 40, 40);
	opacity: 0.7;
	border-radius: 19px;
}
.circle li {
   
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 4px solid #fff;
	cursor: pointer;
	margin: 0 4px;
}
.current {
   
	background-color