js限定内容的溢出滚动(offset,style.left)

1.

1.html:
<div class="test" style="position: relative;">
    <ul id="content" style="position: relative;">
        <li>test111111111112222</li>
    </ul>
</div>

2.scss:
.test{
    overflow: hidden;
    width: 200px;  
}
ul#content{
    list-style-type: none;
    font-size: 0px;
    white-space: nowrap;
    overflow:hidden;
    padding:0px;
    li{
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
    }
}

3.js:
<script>
$(function() {
    var width = window.innerWidth - 100;
    var content = $('#content').html();     //原内容<li>test111111112222222222</li>
    var content_width = $('#content li').width(); //原宽度

    $('#content').html(content + content);
    var w = $('#content li').length * $('#content li').eq(0).width(); //w 总长度
    $('#content').css('width', w);
    var timer;
    var el = $('#content')[0];

    function toRight() {
        window.clearInterval(timer);
        var timer = window.setInterval(function () {
        var offset = el.offsetLeft+10;  //偏移值 每次相对当前位置偏移10px
        if(offset > 0){                 //第一次进来执行一次,以后为-xx 不再执行
                                                    //每次 +10 递增 -160,-150,-140,...,0,10 一旦>0,重置为-165 
            offset = -el.offsetWidth/2;
        }
        el.style.left = offset+'px';
        },100)
    }

     function toLeft() {
         window.clearInterval(timer);
         var timer = window.setInterval(function () {
             var offset = el.offsetLeft - 10;
             if(offset<= -el.offsetWidth/2){  // 同理 当向左偏移到一半的时候重置回来
                        offset = 10;
             }
             el.style.left = offset+'px';
          },100)
     }
           
     //如果容器的宽度够显示内容不进行滚动,不够则进行滚动显示
     if($('.test').width() > content_width){
          $('#content').html(content);
     }
     else{
           toLeft();
     } 
});
</script>

 

2.写了后觉得可以优化下

// js部分:
$(function() {
    var width = window.innerWidth - 100;
    var content_width = $('#content li').width(); 
    $('.test').width(width);
    if(width < content_width){               //如果内容长度大于显示长度
        var timer;
        var el = $('#content')[0];
        var offset = 0;             //内容的初始位置 
        var content = $('#content').html();
        $('#content').append(content);   // 将原内容复制为两条,目的:当向左偏移时,内容前部分消失,在内容的尾部后可以看到内容消失的头部
        function toLeft(){
            window.clearInterval(timer);
            timer = window.setInterval(function () {
                offset = el.offsetLeft - 15;  //每次偏移的量 
                if(offset < -content_width-30){                      //如果滚动到底了,重置回来
                    offset = 0;
                }   
                el.style.left = offset+'px'; //执行偏移                         
            },100); // 每100毫秒移动一遍
        }
        toLeft();
        console.log(content_width);
    }
});

//css:
ul#content{
    list-style-type: none;
    font-size: 0px;
    white-space: nowrap;
    padding:0px;
    li{
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        padding-left: 20px;
    }
}