jquery无缝滚动向左向右

html

<div class="winBox">
    <ul class="scroll"> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
    </ul>
</div

css

.winBox {
    width: 100% ;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: pink;
}
.scroll { /*width的大小是根据下面li的长度和多少个li而定的，需注意！*/
    width: 1500px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.scroll li {
    width: 300px;
    float: left;
    line - height: 40px;
    text - align: center;
}
.scroll li span {
    display: inline - block;
    padding: 0 8px;
}

jquery

$(function () {
    var lilen = $(".winBox li").length;
    $(".scroll").width(lilen * 300)
    var num = 0;

    function goLeft() { //750是根据你给的尺寸，可变的
            if (num == -750) {
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                left: num
            })
        }
        //设置滚动速度
    var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止
    $(".winBox").hover(function () {
            clearInterval(timer);
        },
        function () {
            timer = setInterval(goLeft, 20);
        })
})