jQuery.extend({
Scroll: function (settings) {
//初始化参数
var config = $.extend({
wrap:"",
stepWidth: 75, // 滚动步长
waitTime: 2000, // 间歇时间
inner: "", // 滚动对象
animateTime: 300, // 滚动效果时间,理论上应该比间歇时间短
moving: "" // 需要清除的动画
}, settings);
config.wrap.hover(function () {
clearInterval(config.moving); //当鼠标在滚动区域中时,停止滚动
}, function () {
config.moving = setInterval(function () {
var field = config.wrap.find(config.inner+':first');
field.animate({ marginLeft: -config.stepWidth + 'px' }, config.animateTime, function () {//通过取负margin值,隐藏第一行
field.css('marginLeft', 0).appendTo(config.wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
}, config.waitTime)//滚动间隔时间取决于waitTime
}).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动
}
});
html部分
<div class="scroll">
<ul>
<li>
<img src="http://photo.iautos.cn/carupload/photo/000/875/132//small/1514216.JPG">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2010/1111/small/20101111174818351.JPG">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2012/0306/small/20120306192902445.JPG">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2011/1018/small/20111018180734403.JPG">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2011/0520/small/20110520181611395.jpg">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2012/0208/small/20120208162633875.JPG">
</li>
<li>
<img src="http://photo.iautos.cn/carupload/photo/2010/1210/small/20101210175206408.JPG">
</li>
</ul>
</div>
<style>
.scroll
{
overflow: auto;
}
.scroll ul
{
width: 668px;
overflow: hidden;
margin: 0px;
padding: 0px 0px;
height: 117px;
}
.scroll li
{
width: 25%;
float: left;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.scroll li img
{
width: 150px;
height: 112px;
border: 0px;
}
</style>
<script>
$("document").ready(function () {
$.Scroll({ wrap: $('.scroll ul'), inner: 'li' });
})
</script>