网页实现跑马灯效果-CSDN博客

本文链接：https://blog.csdn.net/Revival_Liang/article/details/57419058

本文介绍了如何在web页面中实现跑马灯效果，通过简洁的代码实现文字或图片的滚动展示，提升网页动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于代码比较少，我就写在一个文件里了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
		<script type="text/javascript">
		//ready()，这个方法在html元素加载完毕才会执行
			$(document).ready(function(){
				//穿入一个box即可
			startInterval($(".box"));
			function startInterval(box){
			var ul = box.find("ul");
			var height = box.find("ul").find("li").height();
			var value = height;
			var IntervalMethod;
			//克隆主要为了实现无限循环，也是无限循环的核心，其他基础知识不再陈述
			var cloneFirstChild = ul.children().first().clone();
			var liSum = ul.children("li").length;
			ul.append(cloneFirstChild);
			IntervalMethod = setInterval(function(){
				if(height == (liSum+1)*value){
					height = value;
					ul.css("top","0px");
					ul.animate({top:-height},300);
				}else{
				ul.animate({top:-height},300);
				}
				height+=value;
			},2300);
			}
			});
		</script>
		<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
			.box{
				left: 50%;
				transform: translate(-50%,0);
				margin-top: 20px;
				border: 3px solid black;
				overflow: hidden;
				position: absolute;
				width: 300px;
				height: 100px;
				background: orange;
			}
			.box-span{
				display: inline-block;
				width: 100px;
				height: 50px;
				line-height: 50px;
				color: red;
				font-size: 20px;
				font-weight: bold;
				text-shadow: 2px 2px 1px yellow;
			}
			ul{
				position: absolute;
				list-style: none;
			}
			li{
				color: white;
				line-height: 100px;
				width: 300px;
				height: 100px;
				text-align: center;
			}
			.child-ul-li1{
				background: red;
			}
			.child-ul-li2{
				background:darkslategray;
			}
			.child-ul-li3{
				background: blue;
			}
			.child-ul-li4{
				background: green;
			}
			.child-ul-li5{
				background: purple;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="child-ul">
				<li class="child-ul-li1"><a>one</a></li>
				<li class="child-ul-li2"><a>two</a></li>
				<li class="child-ul-li3"><a>three</a></li>
				<li class="child-ul-li4"><a>four</a></li>
				<li class="child-ul-li5"><a>five</a></li>
			</ul>
		</div>
	</body>
</html>

gif效果图：

web实现跑马灯