<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100px;height:20px;background: red;overflow: hidden;position: relative;}
#div1 ul{width:100px;background: red;position: absolute;top:0;}
#div1 ul li{width:100px;height:20px;background: red;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function(){
var $aLi = $('#div1 ul li');
var $oUl= $('#div1 ul');
var timer = null;
var num = 0;
timer = setInterval(next,500)
function next(){
$('#div1 ul').delay(2000).animate({'top':$aLi.height()},1000,function(){
$('#div1 ul li:eq(0)').appendTo($('#div1 ul'))
$('#div1 ul').css({'top':0})
});
// console.log(num);
}
});
</script>
</head>
<body>
<div id="div1">
<ul>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
<li>555555555555</li>
<li>666666666666</li>
<li>777777777777</li>
<li>888888888888</li>
<li>999999999999</li>
</ul>
</div>
</body>
</html>
\
