依赖jq的上下文字无缝滚动代码

css部分

ul{
    padding: 10px;
    height: 100px; 
    overflow: hidden;
    float: left;
}
li{
    color: red;
    font-size: 12px;
    height: 35px;
    line-height: 35px;
}

body部分

<ul id="btnStopUp">
     <li>内容111111</li>
     <li>内容222222</li>
     <li>内容33333</li>
     <li>内容44444</li>
     <li>内容55555</li>
     <li>内容66666</li>
</ul>
<ul id="btnStopDown">
     <li>内容111111</li>
     <li>内容222222</li>
     <li>内容33333</li>
     <li>内容44444</li>
     <li>内容55555</li>
     <li>内容66666</li>
</ul>

最重要的js部分

//这个是向下滚动的
$('#btnStopUp').click(function(){
    setInterval(function(){
        $('#leftBox li:last').css({'height':'0px','opacity': '0'}).insertBefore('#leftBox li:first').animate({'height':'35px','opacity': '1'}, 'slow', function() {
          $(this).removeAttr('style');
        });
    },1000);
    $(this).attr('disabled',true);
    return;
});
//这个是向上滚动的
$('#btnStopDown').click(function(){
    setInterval(function(){
        $('#rightBox li:first').animate({'height':'0','opacity': '0'}, 'slow', function() {
          $(this).removeAttr('style').insertAfter('#rightBox li:last');
        });
    },1000);
    $(this).attr('disabled',true);
    return;
});