以前我们html+css或者js都可以实现轮播，但代码量比较大，今天说说JQ实现，JQ相对于之前的代码量偏少。

<div>
  <ul>
	<li><img src="images/bottom4.JPG"/></li>
	<li><img src="images/bottom5.JPG"/></li>
	<li><img src="images/bottom1.JPG"/></li>
	 <li><img src="images/bottom2.JPG"/></li>
	<li><img src="images/bottom3.JPG"/></li>
  </ul>
</div>

简单的布局如上，样式如下：

body,ul,li{margin: 0px;padding: 0px;list-style: none;}
body{position: relative;}
div{width: 442px;overflow: hidden; margin: 0px auto;}
ul{width: 1326px;position: relative;left: -90px;}
ul li{width: 90px;height: 60px; float: left;}
ul li img{width: 90px;height: 60px;}

说一下大概的思路，ul设置所有图片的宽度，li左浮动排列好，div设置一张图片的宽度，利用溢出处理overflow: hidden;处理下。处理后的静态效果图如下：

下面说说用JQ让图片轮播起来，说一下思路，首先我们获取ul对象，通过animate()动画属性三个参数，通过左外边距的平移，一张图是宽度是442像素，平移一张图片的宽度，给它1秒完成，最后一个参数写了一个方法，当前对象中筛选 find() li的第一张图插入到末尾appendTo()。同时平移过去一张切一张设置当前对象的左外边距为0px，最后设置一个时间函数每隔2秒调用一次。到这轮播就可以实现了。希望能给大家带来收益，如有错误欢迎指正，谢谢大家   代码如下，代码中也有注释：

$(function(){
 function move(){
  $("ul").animate({"margin-left":"-442px"},1000,function(){ //获取ul对象 的动画左边外边距-90px 1秒完成
  $(this).find("li:first").appendTo("ul"); //当前对象筛选li里的第一个插入到末尾  
  $(this).css("margin-left","0px")//过去一个切一个到末尾
 });
}
  setInterval(move,2000);
}