无缝滚动

最新推荐文章于 2025-07-23 12:41:41 发布

qq_37295810

最新推荐文章于 2025-07-23 12:41:41 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37295810/article/details/55042431

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			body {
				padding: 50px;
			}
			
			#div1 {
				width: 800px;
				height: 200px;
				border: 1px solid #d8d8d8;
				position: relative;
				overflow: hidden;
			}
			
			#div1 ul {
				padding: 10px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			
			#div1 ul li {
				width: 180px;
				height: 180px;
				background: red;
				color: #FFFFFF;
				font-size: 25px;
				line-height: 180px;
				text-align: center;
				float: left;
				border: 1px solid #000000;
				box-sizing: border-box;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				var oUl = oDiv.getElementsByTagName('ul')[0];
				var aLi = oUl.getElementsByTagName('li');
				oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
				oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

				function move() {
					if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
						oUl.style.left = '0';
					}
					if(oUl.offsetLeft > 0) {
						oUl.style.left = -oUl.offsetWidth / 2 + 'px';
					}
					oUl.style.left = oUl.offsetLeft + 2 + 'px';
				}
				var timer = setInterval(move, 30);
				oDiv.onmouseover = function() {
					clearInterval(timer);
				};
				oDiv.onmouseout = function() {
					timer = setInterval(move, 30);
				};
			};
		</script>
	</head>

	<body>
		<div id="div1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>

</html>