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

1.

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

.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;
    }
}

.js:
<script>
$(function() {
    var width = window.innerWidth - ;
    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().width(); //w 总长度
    $('#content').css('width', w);
    var timer;
    var el = $('#content')[];

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

     function toLeft() {
         window.clearInterval(timer);
         var timer = window.setInterval(function () {
             var offset = el.offsetLeft - ;
             if(offset<= -el.offsetWidth/){  // 同理 当向左偏移到一半的时候重置回来
                        offset = ;
             }
             el.style.left = offset+'px';
          },)
     }

     //如果容器的宽度够显示内容不进行滚动,不够则进行滚动显示
     if($('.test').width() > content_width){
          $('#content').html(content);
     }
     else{
           toLeft();
     }
});
</script>

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

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