js笔记（10）之无缝滚动

最新推荐文章于 2021-10-24 10:22:05 发布

双之城

最新推荐文章于 2021-10-24 10:22:05 发布

阅读量277

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u011026037/article/details/51048974

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

无缝滚动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>无缝滚动</title>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	#div1{
		width:500px;
		height:171px;  
		margin: 100px auto;
		position: relative;
		background: red;
		overflow: hidden;
	}
	#div1 ul{
		position: absolute;
		left: 0;
		top: 0;
	}
	#div1 ul li{
		float: left;
		width: 125px;
		height: 171px;
		list-style: none;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		var oUl = oDiv.getElementsByTagName('ul')[0];
		var aLi = oUl.getElementsByTagName('li');
		var speed = 2;

		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 + speed + 'px';
		};
		var timer = setInterval(move,30);

		oDiv.onmouseover = function(){
			clearInterval(timer);
		};
		oDiv.onmouseout = function(){
			timer = setInterval(move,30);
		};;

		document.getElementsByTagName('a')[0].onclick = function(){
			speed = -2; //向左走
		};
		document.getElementsByTagName('a')[1].onclick = function(){
			speed = 2;   //向右走
		};
	}
</script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
	<ul>
		<li><img src="img1/1.jpg"></li>
		<li><img src="img1/2.jpg"></li>
		<li><img src="img1/3.jpg"></li>
		<li><img src="img1/4.jpg"></li>
	</ul>
</div>
</body>
</html>
---------------------------------------------------------------------------------------