轮播图的实现原理（左右键切换，圆点切换）

轮播图的实现分两部分，第一部分是图片的切换，另一部分是圆的选择改变图片。

首先图片的切换，主要用到了position，每张图片都设定position：absolute；属性，并没有用到浮动的效果。还有设定好被选中的图片的样式。当点击左键时，对图片的index进行判断，若为第一张，要改变index的值为4，其他执行Index--即可；当点击右键时，对图片的index值进行判断，若为最后一张，改变index的值为0，其他执行index++即可。

随后进行圆点的切换时，首先要考虑到为每个圆点设置data-index的属性，记录每个圆点的下标值，方便js操作时获取点击圆点的下标。要操作一个for循环对每一个圆点进行监听。

具体操作如下代码：

	
	
	


	

		

			
1
			
2
			
3
			
4
			
5
		
		

			

			

			

			

			
	
		
		<
		>