autoRoll_UpDown函数
function autoRoll_UpDown($domObj,speed){ //$domObj 外围容器的jQuery式元素对象 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) }) } }
下边是一个已经跑通的demo
<html> <head> <title>（demo）自动-无缝-上下滚动</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>