html实现文字上下无缝轮播

cv即可，放心食用
css

#box{ overflow: hidden; width: 100px;height: 50px;}
		.centerBox>ul{
			margin: 0 auto;
			padding: 0;
		}

html

<div class="centerBox" id="box">
		<ul id="ul1">
			<div>1111111111</div>
			<div>1111111111</div>
			<div>1111111111</div>
			<div>222222</div>
		</ul>
		<ul id="ul2"></ul>
</div>

js

window.onload = roll(300); //速度控制数值越大，速度越慢
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++;
    }
}

如果有帮助，请不要吝啬您的点赞！谢谢