原生JS实现轮播图（事件委托和普通实现）

轮播图

轮播图的概念相信不用赘述，那么我们直接开始思路解析。如果直接要源代码，请点击此处

思路解析

轮播图实现的思路其实很简单，我采用的是几张图片依次横向排列，通过将可视区域和图片大小统一来实现每次只播放一张图片，然后设定定时器来定时的轮播图片（本质就是改变后面一整张图的位置，有点类似于几张横向粘在一起的照片的感觉，前面有个相框，你可以拉动后面的照片来决定相框里显示哪张照片），思路很简单，那么，上代码

代码解析

首先给出html结构：

	<div class="myView">
			<div id="slide">
				<img src="1.jpg"  class="slide"><img src="2.jpg"  class="slide"><img src="3.jpg"  class="slide">
			</div>
			<div class="prev" onclick="prevPic()"><</div>
			<div class="next" onclick="nextPic()">></div>
			<div class="pointer">
				<span class="button" index="0" style="background:green;"></span>
				<span class="button" index="1"></span>
				<span class="button" index="2"></span>
			</div>
		</div>

此处需要注意：因为浏览器兼容的问题img在多行分布时会有一个横向的margin，解决办法为删除img图标之间的换行符和空格等。不信你可以试试（滑稽）

CSS代码比较简单，就是设计一些简单的样式，关键点就在于用了CSS3的transition实现一个动画效果，难度不高，在最后的源码中给出。

JS的代码其实也不难，简单解析开始

	let index = 0;
	let imgNum = 3;
	let imgWidth = 500; 
	let slide = document.getElementById("slide");
	let btns = document.getElementsByClassName("button");
	let autoToggle = setInterval(togglePic,3000);