<html>
<head>
<title>自动-无缝-上下滚动</title>
<script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
<link type="text/css" rel="stylesheet" href="http://i.tq121.com.cn/c/core.css">
</head>
<body>
<style>
*{padding:0; margin:0;}
div{ margin:100px;height:50px;width:200px; overflow:hidden; position:relative; }
ul{ position:absolute; top:0; left:0; width:100px;}
ul li{ height:50px; width:200px; text-align:center; line-height:50px;color:#fff; cursor:pointer;}
</style>
<div>
<ul>
<li style="background:red;">11</li>
<li style="background:blue;">22</li>
</ul>
</div>
<script>
var $U = $(‘ul‘);
//autoRoll_UpDown($U); //默认滚动速度3秒
autoRoll_UpDown($U,1000); //设置滚动速度 1秒
function autoRoll_UpDown($domObj,speed){
var speed = speed || 3000; //默认速度3秒
var len = $domObj.children().length;
var chiH = $domObj.children().height();
if(len>1){
$domObj.append($domObj.html());
var pointRoll = 0;
function move(){
pointRoll++;
if(pointRoll > len){
pointRoll = 1;
$domObj.css(‘top‘,‘0px‘);
}
$domObj.animate({top:-chiH*pointRoll+"px"});
}
var time = setInterval(move,speed)
$domObj.hover(function(){
clearInterval(time);
},function(){
time = setInterval(move,speed)
})
}
}
</script>
</body>
</html>
