原生js写个文字向上轮播播放的功能，添加鼠标滑入滑出事件

本文介绍如何用原生JavaScript创建一个文字向上轮播的效果，并结合鼠标滑入滑出事件来控制播放。当鼠标滑入时，轮播停止；鼠标移开，轮播继续。详细代码和实现过程在内容中给出。

1.写上对应的元素;

<div id="rebox">
			<ul id="comment1">
				<li>第一条</li>
				<li>第二条</li>
				<li>第三条</li>
				<li>第四条</li>
				<li>第五条</li>
				<li>第六条</li>
			</ul>
			<ul id="comment2"></ul>
		</div>

以及样式：

<style>
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 100px;
				height: 63px;
				/* 必须 */
				overflow: hidden;
				/* 必须 */
				margin: 50px auto;
				border: 1px solid red;
				text-align: center;
			}

			ul {
				list-style: none;
			}
		</style>

2.js代码控制它的向上轮播，鼠标滑入立即停止，鼠标移除，立即轮播，代码如下：

<script>
		window.onload = roll(50);

		function roll(t) {
			var ul1 = document.getElementById("comment1");
			var ul2 = document.getElementById("comment2");
			var moveStill = document.getElementById("rebox");
			ul2.innerHTML = ul1.innerHTML;
			moveStill.scrollTop = 0; // 开始无滚动时设为0
			var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
			// 鼠标移入div时暂停滚动
			moveStill.onmouseover = function() {
				clearInterval(timer);
			}
			// 鼠标移出div后继续滚动
			moveStill.onmouseout = function() {
				timer = setInterval(rollStart, t);
			}
		}
		// 开始滚动函数
		function rollStart() {
			// 上面声明的DOM对象为局部对象需要再次声明
			var ul1 = document.getElementById("comment1");
			var ul2 = document.getElementById("comment2");
			var moveStill = document.getElementById("rebox");
			// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
			if (moveStill.scrollTop >= ul1.scrollHeight) {
				moveStill.scrollTop = 0;
			} else {
				moveStill.scrollTop++;
			}
		}
	</script>

效果图：