jquery无限无缝文字轮播滚动

实现原理

1 复制一份要滚动内容追加到原内容后面

2 js动态修改滚动区块的top或left的绝对位置

3 当滚动top或left位置等于区块高度或宽度时，让其归0，这就实现的无缝轮播

html代码

<div class="box">
<div class="box">
        <ul class="scroll">
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href="">6</a></li>
                <li><a href="">7</a></li>
                <li><a href="">8</a></li>
                <li><a href="">9</a></li>
        </ul>
</div>


css 代码

.scroll{
        position:absolute;
}
.box{
        overflow:hidden;
        position:relative;
        height:345px;
}
.box ul{
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
}
.box ul li a{
        font-size:14px;
        display:block;
        height:40px;
        line-height:40px;
        border-bottom:1px dashed #ccc;
        text-indent:10px;
        overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

js代码

$(function(){
        
   //复制一分代码
        var copy = $('.scroll').html();
        $('.scroll').append(copy);

        //动态执行函数
        var num = 0;
    function goLeft() {
        //345垂直的高度
        if (num == -345) {
            num = 14; //如果有抖动可以进行调节
        }
        num -= 1;
        $(".scroll").css({top: num})
    }
        
    //设置滚动速度20
    var timer = setInterval(goLeft, 20);
        
    //设置鼠标经过时滚动停止
    $(".scroll").hover(function() {
        clearInterval(timer);
    },
    function() {
        timer = setInterval(goLeft, 20);
    })
        
});