JS实现文字无缝滚动

html结构：

<div id="main">
        <div id="dom1">
            <ul>
                <li>aaaaaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>ccccccccccc</li>
                <li>ddddddddddd</li>
                <li>eeeeeeeeeee</li>
                <li>fffffffffff</li>
            </ul>
        </div>
    </div>

style样式：

<style>
  #main{width: 300px;height: 126px;overflow: hidden;}
</style>

JS代码：

<script>
    var main = document.getElementById("main");
    var dom1 = document.getElementById("dom1");
    //创建用于复制dom1的新节点
    var newnode = document.createElement("div");
    newnode.id = "dom2";
    main.appendChild(newnode);
    var dom2 = document.getElementById("dom2");
    var speed = 50;    //设置速度
    dom2.innerHTML = dom1.innerHTML;  //复制dom1节点
    // 滚动函数
    function moveTop() {
        // 当main向上滚动超出部分>=滚动节点高度时, 设置为scrollTop为0
        if (dom1.offsetHeight - main.scrollTop <= 0 ) {
            main.scrollTop = 0;
            // 或者main.scrollTop -= dom1.offsetHeight;
        } else {
            main.scrollTop++;
        }
    }

    var myMarquee = setInterval(moveTop, speed);  //设置定时器
    // 鼠标悬停时清除定时器停止滚动，移出后继续滚动
    main.onmouseover = function() {
        clearInterval(myMarquee);
    }
    main.onmouseout = function() {
          myMarquee = setInterval(moveTop, speed);
    }
</script>