向上滑动效果

html结构：

<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>

css结构：

<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>

js结构：

<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>