无限滚动轮播

jq实现无限滚动的轮播图
css：

div {
            width: 600px;
            height: 161px;
            border: 1px solid #333;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            list-style: none;
            width: 1800px;
            height: 161px;
            padding-left: 0;
            margin-top: 0;
        }
        
        ul li {
            float: left;
        }

html：

<div>
        <ul>
            <li style="width: 300px;height: 161px; background-color: aqua;"></li>
            <li style="width: 300px;height: 161px; background-color: wheat;"></li>
            <li style="width: 300px;height: 161px; background-color: yellow;"></li>
            <li style="width: 300px;height: 161px; background-color: peru;"></li>
            <li style="width: 300px;height: 161px; background-color: aqua;"></li>
            <li style="width: 300px;height: 161px; background-color: wheat;"></li>
        </ul>
    </div>

jq：

<script src="./js/jquery-2.1.4.min.js"></script>
<script>
    $(function() {
        var offset = 0;
        var timer = setInterval(function() {
            offset += -10;
            if (offset <= -1200) {
                offset = 0;
            }
            $('ul').css("marginLeft", offset)
        }, 50)
    })
</script>