教你如何利用js原生实现一个轮播图效果

首先我们先对这个轮播图进行分析：

布局方面主要分为了轮播图容器、左右翻页按钮、导航小圆点以及图片列表

HTML：

		<!-- 显示区域 -->
		<div class="wrap">
			<!-- 箭头 -->
			<span class="prev">&lt;</span>
			<span class="next">&gt;</span>
			<!-- 图片 -->
			<ul class="list">
				<li>
					<img src="img/0.jpeg" alt="">
				</li>
				<li>
					<img src="img/1.jpeg" alt="">
				</li>
				<li>
					<img src="img/2.jpeg" alt="">
				</li>
				<li>
					<img src="img/3.jpeg" alt="">
				</li>
			</ul>
			<!-- 小圆点 -->
			<ul class="iconlist">
				<li class="hightlight"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

在这里通过span标签结合HTML实体完成翻页按钮的结构，而小圆点和图片都可以看做是一个列表，通过列表结合CSS可以让小圆点和图片横向排列，实现最终的效果。

在小圆点这里，我给第一个li设置了‘’hightlight‘’类名，大家可以思考一下，这一步的目的是什么？

紧接着看一下这些结构的样式应该如何实现

CSS:

			/* 清除浏览器默认样式*/
			*{
				padding: 0;
				margin: 0;
			}
			/* 清除列表项目前的小圆点*/
			ul{
				list-style: none;
			}
			/* 外部容器样式 */
			.wrap{
				width: 800px;
				height: 400px;
				margin: 50px auto;
				/* 在这里，轮播图的排列都是水平的，超出了容器的宽度
				所以，对于超出父容器的部分，进行隐藏*/
				overflow: hidden;
				/* 对父容器开启相对定位，方便内部元素定位做参考 */
				position: relative;
			}
			/* 图片列表容器样式 */
			.wrap > .list{
				/* 把宽度设置足够宽,用于排列照片,也可以设置为所有图片的总宽度 */
				width: 5000px;
				height: 100%;
				transition: .3s;
			}
			/* 每张图片容器的样式 */
			.wrap > .list li{
				/* 原本是垂直排列的,通过向左浮动,让图片水平排列*/
				float: left;
			}
			/* 导航小圆点 */
			.wrap > .iconlist{
				position: absolute;
				bottom: 10px;
				/* 下面两个样式可以让不知道宽度的元素进行水平居中 
				元素开启绝对定位后,左边远离包含块的50%,但这时元素
				还是左边靠着包含块的中线,真正的居中需要再向左减去
				元素宽度的一半,但是当我们不知道元素宽度的时候,可以
				通过translateX向左移动50%,而这里的50%刚好是该元素
				宽度的一半
				*/
				left: 50%;
				transform: translateX(-50%);
				z-index: 9;
			}
			/* 设置每个小圆点的样式 */
			.wrap > .iconlist li{
				margin: 0 10px;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: #808080;
				float: left;
				border: 2px solid #f0f0f4;
				transition: .3s;
			}
			/* 元素选中状态和hover状态的样式 */
			.wrap > .iconlist li.hightlight,.iconlist li:hover{
				background-color: #00bc12;
			}
			/* 左右两边的翻页按钮样式 */
			.wrap span{
				position: absolute;
				width: 40px;
				height: 60px;
				font-size: 30px;
				color: #FFFFFF;
				line-height: 60px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				/* 和上方相同道理,实现垂直居中*/
				top: 50%;
				transform: translateY(-50%);
				z-index: 9999;
				transition: .3s;
			}
			/* 上一个 */
			/* 在一开始需要让两个按钮先藏起来，当鼠标移入到父容器内时，再显示 */
			.wrap .prev{
				left: -40px;
			}
			/* 下一个 */
			.wrap .next{
				right: -40px;
			}
			/* 当父容器hover时，分别让两个翻页按钮移动出来*/
			.wrap:hover .prev{
				left: 0;
			}
			.wrap:hover .next{
				right: 0;
			}
			/*  当父容器hover时，鼠标指针变为小手*/
			.wrap:hover{
				cursor: pointer;
			}
			/* 当翻页按钮hover时，鼠标指针以及颜色的变化 */
			.wrap span:hover{
				cursor: pointer;
				background-color: rgba(0,0,0,.8);
			}

建议初学者在看样式代码的时候，自己动手敲一下，自己梳理逻辑，先实现大体框架，再逐渐丰富效果，以及hover状态的效果改变。

做到这里后，我们轮播图的结构样式已经完成，普通的hover状态样式都可以实现，接下来就要通过js来反馈用户的行为。

通过js主要实现的功能是：

1.自动翻页
2.翻页按钮点击后，图片向着相应的方向进行翻页
3.图片到最后一张时，会再翻到第一页
4.图片翻页的时候，下面的导航小圆点同样也会跟着变化，同时点击小圆点，图片也会切换

其中后面三点的逻辑可能有些绕，我在做的时候首先完成的是，点击某一个小圆点，该小圆点选中，然后其他小圆点恢复原始状态，这就是前面我在HTML中为什么要设置hightlight这个类的原因了，因为我要通过js点击事件结合排它思想，来控制小圆点的切换。

这一步还是比较简单的，接着就是如何通过翻页按钮控制小圆点，之后再完成图片的切换，最后再实现自动翻页的功能。

JavaScript：

			window.onload = function(){
				// 获取翻页按钮的对象，返回的是一个数组
				// prveAndNext[0]代表的是 上一页
				// prveAndNext[1]代表的是 下一页
				var prveAndNext = document.querySelectorAll('span');
				// 获取小圆点的对象，返回的是一个数组
				var dot = document.querySelectorAll('.iconlist li');
				// 获取图片列表容器的对象
				var imgFirst = document.querySelector('.list');
				// 计数器，用于控制当前图片的循环
				var id = 0;
				for(var i = 0;i < dot.length;i++){
					// 给每个小圆点绑定单击事件
					dot[i].onclick = function(){
						// 当某个小圆点被点击后，所有的小圆点先去除类名
						for(var j = 0;j < dot.length;j++){
							dot[j].className = '';
						}
						// 将类名添加到被点击的这个小圆点上
						this.className = 'hightlight';
						// 获取当前第几个小圆点
						for(var k = 0;k < dot.length;k++){
							// 循环判断哪个小圆点上有类名
							if(dot[k].className == 'hightlight'){
								// 查出来后,把这个索引交给id,知道该切换到第几张图片
								id = k;
								// 这一步的目的就是通过修改图片列表的margin-left为
								// 负值，让整个图片列表左移，达到切换的效果，我这里
								// 每张图片的宽度为800px
								// 当第一张图片的时候，id为0，所以margin-left也为0
								// 当第二张图片的时候，id为1，所以margin-left为-800px
								// 当第三张图片的时候，id为2，所以margin-left为-1600px
								// ... 依次类推，可以根据获取的id值，来修改照片的切换
								imgFirst.style.marginLeft = -800 * id + 'px';
								break;
							}
						}
					}
				}
				// 上一页按钮单击事件绑定
				prveAndNext[0].onclick = function(){
					PrveImg();
					HightLight();
				}
				// 下一页按钮单击事件绑定
				prveAndNext[1].onclick = function(){
					NextImg();
					HightLight();
				}
				/*
					在这里分别定义两个函数的目的是，让上面两个事件触发后
				调用这里的函数。
				
					这里实现的功能是单击翻页，小圆点也会变化，而小圆点的
				变化是通过给li标签添加了hightlight类名来实现的，而实现添加
				类名又是用过id值来准确更改的，所以在这里，我们通过翻页按钮来
				改变id的值，进而来控制小圆点的选中状态
				
					但是，id的范围为0 - 3 不能一味的增加和减少，所以在两个边
				界值的时候，对id值进行重置，形成一个“环”，最终模拟“轮播”的效果
				*/
				
				function NextImg(){
					if(id == 3){
						id = 0;
					}else{
						id++;
					}
					// 可以改写三元表达式，更加简便
					// if (id == 3)?id = 0 : id++;
				}
				function PrveImg(){
					if(id == 0){
						id = 3;
					}else{
						id--;
					}
					// if (id == 0)?id = 3 : id--;
				}
				/* 这里的函数是为了实现翻页按钮按下后，改变了id值，通过id来改变
				小圆点的选中状态和图片的切换效果
				
				*/
				function HightLight(){
					for(var j = 0;j < dot.length;j++){
						dot[j].className = '';
					}
					dot[id].className  = 'hightlight';
					imgFirst.style.marginLeft = -800 * id + 'px';
					console.log(id);
				}
				// 定时器
				// 控制id自增,当到最大值后,再回到最小值。
				// 每过两秒id自增，并且再次调用HightLight()切换小圆点选中状态、图片切换
				var timer = setInterval(function(){
					if(id == 3){
						id = 0;
					}else{
						id++;
					}
					HightLight();
				},2000)
			}

OK，到这里，轮播图就完全实现了，其实这里还是有一个小问题的
就是当点击完翻页按钮后，需要对计时器进行重置，否则计时器还是按照原有的时间间隔执行切换，在用户体验上不是很好，有兴趣的小伙伴可以自己试一下，我把代码放在下面，大家可以自行下载查看

源码下载

如果对您有帮助的话，记得点个赞哦~

内容如有错误，请各位大佬斧正