jQuery无缝滚动
<style type="text/css">
*{margin:0;padding:0;}
img{border:none;}
#slide{overflow:hidden;width:900px;margin:100px auto;}
ul{list-style:none;width:2999px;}
li{float:left;}
</style>
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function AutoScroll(){
var _scroll = $("#slide>ul");
//ul往左边移动300px
_scroll.animate({marginLeft:"-300px"},1000,function(){
//把第一个li丢最后面去
_scroll.css({marginLeft:0}).find("li:first").appendTo(_scroll);
});
}
$(function(){
//两秒后调用
var _scrolling=setInterval(AutoScroll,2000);
$("#slide>ul").hover(function(){
//鼠标移动DIV上停止
clearInterval(_scrolling);
},function(){
//离开继续调用
_scrolling=setInterval(AutoScroll,2000);
});
});
</script>
</head>
<body>
<div id="slide">
<ul>
<li><img src="1.jpg" alt="jQuery无缝滚动" /></li>
<li><img src="2.jpg" alt="jQuery无缝滚动" /></li>
<li><img src="3.jpg" alt="jQuery无缝滚动" /></li>
<li><img src="4.jpg" alt="jQuery无缝滚动" /></li>
<li><img src="5.jpg" alt="jQuery无缝滚动" /></li>
</ul>
</div>上面是一张一张滚动
下面是一直滚动
<div id="slide">
<ul class="slideul1">
<li class="slideli1">
<ul class="slideul2">
<li><img src="1.jpg" alt="jQuery无缝滚动"/></li>
<li><img src="2.jpg" alt="jQuery无缝滚动"/></li>
<li><img src="3.jpg" alt="jQuery无缝滚动"/></li>
<li><img src="4.jpg" alt="jQuery无缝滚动"/></li>
<li><img src="5.jpg" alt="jQuery无缝滚动"/></li>
</ul></li>
<li class="slideli2"></li>
</ul>
</div>
<script type="text/javascript">
var _speed=30;
var _slide = $("#slide");
var _slideli1 = $(".slideli1");
var _slideli2 = $(".slideli2");
_slideli2.html(_slideli1.html());
function Marquee(){
if(_slide.scrollLeft() >= _slideli1.width())
_slide.scrollLeft(0);
else{
_slide.scrollLeft(_slide.scrollLeft()+1);
}
}
$(function(){
//两秒后调用
var sliding=setInterval(Marquee,_speed)
_slide.hover(function() {
//鼠标移动DIV上停止
clearInterval(sliding);
},function(){
//离开继续调用
sliding=setInterval(Marquee,_speed);
});
});
</script>来自这里：http://ons.me/299.html
您可能感兴趣的文章：
jQuery无缝滚动
jQuery使用数组编写图片无缝向左滚动
jquery无缝向上滚动实现代码
jcarousellite.js 基于Jquery的图片无缝滚动插件
基于jQuery的图片左右无缝滚动插件
基于jQuery的上下无缝滚动应用(单行或多行)
Jquery实现图片无缝滚动插件
javascript文字无间断滚动效果（文字上下无缝滚动）
zepto实现移动端无缝向上下滚动
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子