android 无缝滚动图片,jquery实现图片滚动效果的简单实例

jquery 图片自动无缝滚动

ul,li { list-style: none;margin: 0; padding: 0;}

li { float: left;}

img { width: 100px; height: 100px; padding:0 2px}

.a { width: 400px; height:100px;margin: 0 auto; overflow: hidden; border: 1px solid red;}

.aa { width: 200px; height:100px;margin: 50px auto 0 auto; overflow: hidden; border: 1px solid red;}

•               

•               

•               

•               

•               

•               

•               

•               

•               

•               

jQuery.fn.extend({

pic_scroll:function (){

$(this).each(function(){

var _this=$(this);//存储对象

var ul=_this.find("ul");//获取ul对象

var li=ul.find("li");//获取所有图片所有的li

var w=li.size()*li.width();//统计图片的长度

li.clone().prependTo(ul);//克隆图片一份放入ul里

ul.width(2*w);//设置ul的长度，使所有图片排成一排

var i=1,l;

_this.hover(function(){i=0},function(){i=1});//鼠标经过时设置i=0达到鼠标经过停止效果

setInterval(function(){

//定时滚动函数

l = _this.scrollLeft();

if (l < w) {

_this.scrollLeft(l+i);

} else {

_this.scrollLeft(0);

}

},20);

})

}

});

$(document).ready(function(){

$(".a,.aa").pic_scroll();//多个地方使用

})