jQuery实现图片轮播特性。使用animate函数

图片轮播特效是一个非常常见的特性，可以使用jQuery来实现，下面使用animate（）函数来实现向左轮播（向其他方向的轮播与其相似），实现的方法有两种，先看一下实现原理：

1、假设公五张图片，图片宽度均为200px，图片并排放置在一个总宽度为1000px的容器内。

2、另外设一个视口容器的宽度为600px，并设置overflow属性为hidden，将上述图片容器放入此容器内，则只会同时显示三张图，另外两张在容器外部且不可见，（同理，如果容器宽度为200px，则只会同时显示一张图，当设置容器宽度为1000px或更大时，可同时显示所有图片，但是这样会使轮播效果不平滑。）

3、实现轮播效果的核心思想：两种：

（1）使用animate（）函数平滑改变图片容器的左外边距为-200px（设置左外边距为-200px，会使图片容器的左外边界往右收缩200px，视觉上图片容器向左移动了200px，进而使第一个图片向左移200px，进而第二个图片正好移动到了第一个图片的位置。。。），然后在回调函数内设置回图片容器的左外边距为0，并将第一个图片（t它已经在视口容器左边了）移除后加到最后一个图片的后面，然后重复上面的动作，这就实现了轮播。

（2）设置视口容器的position值设为relative，图片容器的position值设为absolute，使用animate（）函数将图片容器的left值平滑设置为-200px，将图片容器向左移动一个图片的宽度（进而第一个图片到了第一个图片的位置。。。），在回调函数内将图片容器的left属性设置回0，并将第一个图片移除后添加到最后一个图片的后面，重复上述动作，实现轮播效果。

下面是实现代码：

第一种方法：

	
	
	
	
	



	
 图片轮播
	

		

		

		

		

		

	

第二种方法：

	
	
	
	
	



	
 图片轮播