jquery实现图片自动无缝滚动。自己写的，不用插件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dd = setInterval(gd, 30);
function gd() {
var position = $(".a").scrollLeft(); //scrollLeft()是获取对象的水平偏移量
if (position < 1000) {
$(".a").scrollLeft(position + 1);
}
else {
$(".a").scrollLeft(0);
}
$("span").html($(".a").scrollLeft()); //显示水平偏移量的值
}
$(".a").mouseleave(function () {
dd = setInterval(gd, 30);
});
$(".a").mouseenter(function () {
clearInterval(dd);
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
li { float: left; margin-left: 10px; }
img { width: 100px; height: 100px; }
.a { width: 400px; margin: 0 auto; overflow: hidden; }
.b { width: 3000px; }
</style>
</head>
<body>
<div class="a">
<div class="b">
<ul>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
</ul>
<ul>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" /></a></li>
</ul>
</div>
</div>
<br style="clear: both" />
<p>
当前的值为：<span></span></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片自动无缝滚动</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
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;}
</style>
</head>
<body>
<div class="a">
<ul>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
</ul>
</div>
<div class="aa">
<ul>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/kc1.jpg" /></a></li>
<li><a href="#"><img src="http://www.scscms.com/FUploadFile/image/2010-9/2008781032576_2.jpg" /></a></li>
</ul>
</div>
<script type="text/javascript">
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();//多个地方使用
})
</script>
</body>
</html>
