主要思路：

　　滑動動畫，就是改變元素的位置，要改變元素的位置有兩種方法，一種改變left，top屬性(相對定位和絕對定位),還有一種，就是現在這裡用到的,改變margin的值。

　　本例中動畫過程：

　　　　1.設定要改變margin-top的值;

　　　　2.用animate方法改變第一個LI的margin-top的值為---負值（負值會向上移動）;

　　　　3.在動畫完成之後，回撥函式內，把當前的第一個LI的margin-top改變為"0"

　　　　4.把當前這第一個LI移動到所有LI的最後一個。（實現無縫）

<div class="even-tab">
        //表頭
        <ul class="even-tab-bt">
            <li>姓名</li>
            <li>性別</li>
            <li>學歷</li>
            <li>原職業</li>
            <li>月薪</li>
            <li class="bt-sj"><i></i>現職業</li>
            <li class="bt-sj"><i></i>月薪</li>
            <li>入職公司</li>
            <li>參加班級</li>
        </ul>
        <div style="width: 100%;height: 20px;"></div>
        <!--表中同學資訊-->
        <div id="new_txscroll">
            <div class="new-overa" >
                <ul class="even-tab-nr">
                    <li>張同學</li>
                    <li>男</li>
                    <li>本科</li>
                    <li>Web前端</li>
                    <li>7.5K</li>
                    <li class="bt-sj">Java全棧工程師</li>
                    <li class="bt-sj">16K</li>
                    <li>青橙**</li>
                    <li>夜校班1781期</li>
                </ul>
                <ul class="even-tab-nr">
                    <li>陳同學</li>
                    <li>男</li>
                    <li>本科</li>
                    <li>銷售</li>
                    <li>底薪2K</li>
                    <li class="bt-sj">Java工程師</li>
                    <li class="bt-sj">12K</li>
                    <li>幻樂**同創</li>
                    <li>夜校班1781期</li>
                </ul>

                <ul>....</ul>
                .....


            </div>
        </div>


    </div>
 

.even-tab{width: 1152px;height: 840px; margin: 0 auto;padding: 20px;}
.even-tab .even-tab-bt{width: 100%;height: 40px;background: #0F6C4F;text-align: center;display: flex; display: -webkit-flex; -moz-box-shadow: 9px -9px 0px #45A383; /* 老的 Firefox */box-shadow: 9px -9px 0px #45A383;}
.even-tab .even-tab-bt li{width: 128px; height: 40px;line-height: 40px;background: #0F6C4F;font-size: 16px;color: #FFFFFF;}
.even-tab .even-tab-bt .bt-sj{background: #3979D9;position: relative;}
.even-tab .even-tab-bt .bt-sj i{position: absolute;display: inline-block;width:0px;height:0px;left: 54px;bottom: -15px; border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid  #3979D9;}

.even-tab .even-tab-nr{width: 100%;height: 40px;text-align: center;display: flex; display: -webkit-flex;margin-bottom: 8px;}
.even-tab .even-tab-nr li{width: 128px; height: 40px;line-height: 40px;background: #FFFFFF;font-size: 16px;color: #121212;text-align: center;overflow: hidden;}
.even-tab .even-tab-nr .bt-sj{background: #3979D9;}

.new-overa{
    box-sizing: border-box;
    width: 100%;
    /*高度要比他父級的高,這樣看不到新增ul時的效果,只看到滾動效果*/
    height: 840px;
    overflow: hidden;
}
#new_txscroll{
            border: 2px solid red;
            height: 760px;
            overflow: hidden;
}
 

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">

    //同學資訊自動滾動效果
    $(function() {
        var $this = $("#new_txscroll");
        var scrollTimer;
        
        //設定滑鼠移入清楚定時器,移出時恢復滾動
        $this.hover(function() {
            clearInterval(scrollTimer);
        }, function() {
            scrollTimer = setInterval(function() {
                scrollNews($this);
            }, 1500);
        }).trigger("mouseleave");


        //設定滾動效果***marinTop的值為負值向上滾動
        function scrollNews(obj) {
            var $self = obj.find(".new-overa");
            var lineHeight = $self.find("ul:first").height();
            $self.animate({
                // "scrollTop": -lineHeight + "px"
                "marginTop": -lineHeight + -8 +"px"
            }, 800, function() {
                $self.css({
                    marginTop: 0
                }).find("ul:first").appendTo($self);//將滾出去的在給新增到列表的尾部實現無限迴圈滾動
            })
        }
    })


</script>
 

1*jquery無縫滾動外掛支援圖片無縫滾動或文字無縫滾動----介紹比較全面的部落格