向上滑动效果

<div class="top">
<h1>一元传奇</h1>
<div class="area">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>

<style type="text/css">
html,body,ul,ol,li{
margin: 0;
padding: 0;
}
.top{
position: relative;
width: 300px;
height: auto;
}
.top>h1{
background-color: #898989;
margin: 0;
line-height: 30px;
font-size: 16px;
color: #fff;
padding: 5px;
}
.top>.area{
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
}
.area>ul{
position: absolute;
width: 100%;
height: auto;
left: 0;
top: 0;
}
.area>ul>li{
width: 100%;
height: 50px;
}
</style>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var
area_ul = $('div.area>ul'),
area_ul_lis = $('div.area>ul>li');

// 为。。。
area_ul_lis.each(function(index){
var $self = $(this);
if(index % 2 == 0){
// 偶数
$self.css('background-color','#cccfff');
}else{
// 奇数
$self.css('background-color','#fffccc');
}
});

// area_ul.before().after().append().prepend()
// area_ul.prepend('<li></li>').css('top','-50px');
setInterval(function(){
area_ul.animate({
top : '-50px'
},500,function(){
var area_ul_lis_t = $('div.area>ul>li');
$(this).css('top','0').append(area_ul_lis_t.eq(0));
});
},1000);
});
</script>