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

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

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