JavaScript走马灯效果

最新推荐文章于 2022-11-12 14:10:33 发布

iteye_15447

最新推荐文章于 2022-11-12 14:10:33 发布

阅读量196

点赞数

分类专栏：前端开发文章标签： JavaScript XHTML CSS HTML ViewUI

本文链接：https://blog.csdn.net/iteye_15447/article/details/81804416

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript实现走马灯效果的关键是设置外容器的scrollTop或者其它相应的属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>走马灯</title>
<style type="text/css">
*{
	padding:0;
	margin:0;
	border:none;
}
div{
	width:200px;
	height:20px;
	overflow:hidden;
	margin:auto;
}
li{
	margin-left:2em;
	height:20px;
	line-height:20px;
}
</style>
</head>

<body>
<div id="news">
    <ul>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx2</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx3</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx4</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx5</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx6</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx7</li>
    	<li>xxxxxxxxxxxxxxxxxxxxxxx1</li>
    </ul>
</div>
<script type="text/javascript">
var obj = document.getElementById("news");
obj.scrollTop = 0;
var num = 0;
var interval = new Array();
function roll(){
	obj.scrollTop++;
	if(/^\d+$/.test(obj.scrollTop / 20)){
		clearInterval(interval[0]);
		num ++;
		if(num >= 7){
			num = 0;
			obj.scrollTop = 0;
		}
	}
}
function startRoll(){
	interval[0] = setInterval("roll()",20);
}
interval[1] = setInterval("startRoll()",3000);
</script>
</body>
</html>