随便一搜这个图片轮播，那源代码不是一份两份，那是几堆几堆哟～不过大部分都写得太复杂或者功能太弱，那咱就用jQuery自给自足呗。

要实现的效果也很明确：自动获取对象列表中第一个元素的宽度，然后列表整体向左平移，再把第一个元素绑定到列表最后去；可以再加个鼠标移到列表上停止平移，移开则恢复。

scroll.jpg

在线demo：http://immmmm.com/demo/scrollbox/

HTML结构代码：

 
<div id="scrollbox">
 
	<ul>
 
		<li><img src="1.jpg" alt=""></li>
 
		<li><img src="2.jpg" alt=""></li>
 
		<li><img src="3.jpg" alt=""></li>
 
		<li><img src="4.jpg" alt=""></li>
 
	</ul>
 
</div>

CSS控制代码：

 
#scrollbox{width:500px;height:240px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #000;}
 
#scrollbox ul {width:900px;height:280px;position:absolute;padding:10px 0;}
 
#scrollbox li {float:left;position:relative;margin:0 10px;border:1px solid #000;}

jQuery核心代码：

 
function scrollBox(){
 
	var first = $('#scrollbox ul li:first');
 
	var width = -(first.outerWidth(true)) + 'px';
 
	$('#scrollbox ul').animate({left:width},{
 
		duration:200,
 
		complete:function(){
 
			$('#scrollbox ul').append(first).css("left","0");
 
		}
 
	});
 
};
 
$(document).ready(function(){
 
	myScroll = setInterval(scrollBox,1500);
 
	$('#scrollbox').hover(function(){
 
		clearInterval(myScroll);
 
	},function(){
 
		myScroll = setInterval(scrollBox,1500);
 
	}
 
);
 
})

天气太热，思路混乱，就不解释代码涵义了～不懂的查看相关手册吧。