list列表无缝滚动

第一种 无停顿的滚动

html

<div id="box" class = "marquee_box">
   <ul id="ul1" class = "marquee_list">
        <li v-for="(item, index) in marqueeList" :key="index">
            <p class = "date"><span>{{item.date}}</span></p>
            <p class = "con ellipsis">{{item.con}}</p>
        </li>
    </ul>
    <ul id="ul2"  class = "marquee_list"></ul>
</div>

js

mounted(){
    window.onload = roll(50);
    function roll(t) {
        var ul1 = document.getElementById("ul1");
        var ul2 = document.getElementById("ul2");
        var box = document.getElementById("box");
        ul2.innerHTML = ul1.innerHTML;
        box.scrollTop = 0;
        var timer = setInterval(rollStart, t);
        box.onmouseover = function () {
            clearInterval(timer)
        }
        box.onmouseout = function () {
            timer = setInterval(rollStart, t);
        }
    }
   function rollStart() {
        if (box.scrollTop >= ul1.scrollHeight) {
            box.scrollTop = 0;
        } else {
            box.scrollTop++;
        }
    }
}