jQuery实现跑马灯

前段时间做项目一个需求，轮播方式实现不了，自己写了一个跑马灯实现效果。
HTML：

<div class="container">
        <div class="scroll_div">
            <div class="scroll_begin">
                <ul>
                    <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>
                    <li><a href="#">文字10</a></li>
                    <li><a href="#">文字11</a></li>
                </ul>
            </div>
            <div class="scroll_end"></div>
        </div>
    </div>

js：

window.onload = function() {
	getSroll();
}
// 动画效果
function getSroll() {
    var speed = 30
    var scroll_begin = $(".scroll_begin")[0];
    var scroll_end = $(".scroll_end")[0];
    var scroll_div = $(".scroll_div")[0];
    scroll_end.innerHTML = scroll_begin.innerHTML

    function Marquee() {
        if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
            scroll_div.scrollLeft -= scroll_begin.offsetWidth
        else
            scroll_div.scrollLeft++
    }
    var MyMar = setInterval(Marquee, speed)
    scroll_div.onmouseover = function() {
        clearInterval(MyMar)
    }
    scroll_div.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
    }
};

css：

.container{
    width: 100%;
    height: 50px;
}

.container.scroll_div {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    background: #333;
    color: #a6a6a6;
}

.container.scroll_div a {
    width: 120px;
    height: 50px;
    margin: auto 8px;
    color: #333;
}

.container.scroll_begin,
.container.scroll_end,
.container.scroll_begin ul,
.container.scroll_end ul,
.container.scroll_begin ul li,
.container.scroll_end ul li {
    display: inline-block;
}

.container.scroll_begin ul li,
.container.scroll_end ul li {
    display: inline-block;
    min-width: 200px;
}

.container.scroll_begin ul li a,
.container.scroll_end ul li a {
    display: inline-block;
    width: 100%;
    line-height: 50px;
    color: #a6a6a6;
    text-decoration: none;
}

.container.scroll_begin ul li a:hover,
.container.scroll_end ul li a:hover {
    text-decoration: underline;
}