原生js-横向字幕无缝滚动

功能：横向滚动，鼠标悬浮停止，离开继续滚动，支持pc端和移动端

效果图:

ndox9-22w1q.gif

css:

  #scroll_div {
            height: 39px;
            line-height: 39px;
            overflow: hidden;
            white-space: nowrap;
            width: 100px;
            background: pink;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            z-index: 10;
            border: 10px solid pink;
            margin: 100px;
        }

        #scroll_begin,
        #scroll_end {
            display: inline;
            color:#333;
            font-size: 14px;
        }

html:

<div id="scroll_div" class="fl">
        <div id="scroll_begin">
            <span class="pad_right">
                无缝滚动文案111111-->
            </span>
        </div>
        <div id="scroll_end"></div>
    </div>

js:

$(function() {
        ScrollImgLeft()
        // 横向滚动
        function ScrollImgLeft() {
            let speed = 50; //滚动速度
            let MyMar = null;
            let scroll_begin = document.getElementById("scroll_begin");
            let scroll_end = document.getElementById("scroll_end");
            let scroll_div = document.getElementById("scroll_div");
            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 += 2;
            }
            MyMar = setInterval(Marquee, speed);
            scroll_div.onmouseover = function() {
                clearInterval(MyMar);
            }
            scroll_div.ontouchstart = function() {
                clearInterval(MyMar)
            }
            scroll_div.onmouseout = function() {
                MyMar = setInterval(Marquee, speed);
            }
            scroll_div.ontouchend = function() {
                MyMar = setInterval(Marquee, speed)
            }
        }
    })