jQuery实现列表自动滚动

主要思路：

　　滑动动画，就是改变元素的位置，要改变元素的位置有两种方法，一种改变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无缝滚动插件支持图片无缝滚动或文字无缝滚动----介绍比较全面的博客

https://blog.csdn.net/z69183787/article/details/12882193

2*jQuery实现列表自动滚动-----易懂版

https://www.cnblogs.com/ntt1219/p/3287604.html