js文字自动向上无缝滚动，鼠标放入停止滚动，移出继续滚动

60 阅读 0 评论 40 点赞

我是靠谱客的博主耍酷路人，最近开发中收集的这篇文章主要介绍js文字自动向上无缝滚动，鼠标放入停止滚动，移出继续滚动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如图
在这里插入图片描述
直接复制代码即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.scrollCon {
			    width: 500px;
				height: 150px;
				overflow: hidden;
			}
			ul,li {
				margin: 0;
				list-style: none;
			}
			li {
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="scrollCon" id="scrollCon">
			<ul id="scrollCon1">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<ul id="scrollCon2">
				
			</ul>
		</div>
		<script type="text/javascript">
			var conScroll = function(){
				var scrollCon = document.getElementById("scrollCon");
				var li = scrollCon.getElementsByTagName("li");
				var scrollCon1 = document.getElementById("scrollCon1");
				var scrollCon2 = document.getElementById("scrollCon2");
				if(li.length > 3){
				    scrollCon2.innerHTML = scrollCon1.innerHTML;
				    scrollCon.scrollTop = 0;
				    function rollStart(){
					    if(scrollCon.scrollTop >= scrollCon1.scrollHeight){
					    	scrollCon.scrollTop = 0;
					    }else{
					    	scrollCon.scrollTop++;
					    }
					}
				    var timer = setInterval(rollStart, 50);
				    scrollCon.onmouseover = function(){
				        clearInterval(timer);
				    }
				    scrollCon.onmouseout = function(){
				        timer = setInterval(rollStart, 50);
				    }
				}
			};
			conScroll();
        </script>
	</body>
</html>