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

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

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

HTML结构代码：

• 


• 


• 


• 

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);
}
);
})

Tags：图片, jquery, 滚动, 轮播