HTML-间歇循环滚动-CSDN博客

本文链接：https://blog.csdn.net/weixin_40571965/article/details/84929006

实现滚动播放

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> 间歇循环滚动</title>
<style>
#box{
	  height:240px;
	  width:300px;
	  margin:0 auto;
	  border:1px solid #0066FF;
	  overflow:hidden;
	  padding-bottom:20px;
}
#box li{
	  color:#333;
	  height:24px;
}
#box ul{
  	margin:0;
  	padding:0;
}
</style>
</head>
<body>
	<div id="box">
  		<ul id="con1">
  		</ul>
	</div>
<script>
	var strArrayList=[]; // 创建一个段落文本数组对象，这些段落文本可能是100个也可能是1000个。
	strArrayList[0]='大傻子';
	strArrayList[1]='大疯子';
	strArrayList[2]='哈哈哈';
	strArrayList[3]='哈哈哈哈';
	strArrayList[4]='划水怪';
	var div=document.getElementById('box'); //获得DIV对象。
	var f=document.createDocumentFragment(); //创建碎片对象。
	for(var i=0;i<strArrayList.length;i++){
		var p=document.createElement('P'); //动态创建P标签。
		p.appendChild(document.createTextNode(strArrayList[i]));//段落字符串。
		f.appendChild(p); //附加到碎片对象中。
	}
	div.appendChild(f);//最后返给DIV对象。
	var area=document.getElementById("box");
	area.innerHTML+=area.innerHTML;
	var liHeight=24;
	area.scrollTop=0;
	var delay=0;
	var speed=50;
	var time;
	function starMove(){
	  area.scrollTop++;
	  time=setInterval("scrollUp()",speed);
	}
	function scrollUp(){
	  if(area.scrollTop%liHeight==0){
	  clearInterval(time);
	  setTimeout("starMove()",delay);
	  }else{
	  area.scrollTop++;
	  if(area.scrollTop>=area.offsetHeight/2){
	  area.scrollTop=0;
	  }
	  }
	}
	setTimeout("starMove()",delay);
</script>
</body>
</html>