JS运动之让图片无缝滚动

最新推荐文章于 2022-07-20 13:19:04 发布

源辰_付

最新推荐文章于 2022-07-20 13:19:04 发布

阅读量643

点赞数

分类专栏：前端

前端专栏收录该内容

154 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无缝滚动</title>
		<style>
		*{margin: 0; padding: 0; background: #C66;}
			#btn{
				position: absolute;
				top: 50px;
				left: 710px;
				font-size: 24px;
			}
			#btn a{color: #FFF;text-decoration: none; }	
			#btn a:hover{color: #FC9;text-decoration: none; }
					
			#div1{
				width: 1440px;
				height: 400px;
				margin: 150px auto;
				position: relative;
				background: #f60;
				overflow: hidden;
			}
			#div1 ul{
				list-style-type:none;
				margin: 0;
				padding: 0;
				position: absolute;
				top: 0;
				left: 0;
			}
			#div1 ul li{float: left; width: 480px; height: 400px}
		</style>
		<script>
			window.onload = function() {
				var timer = null;
				var oDiv = document.getElementById('div1');
				//注意：下面这步很容易出错！
				var oUl = oDiv.getElementsByTagName('ul')[0];
				var aLi = oUl.getElementsByTagName('li');
//				oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
				oUl.innerHTML += oUl.innerHTML;
				//ul的总宽度等于任何一个li的宽度乘以li的个数；
				oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
				var speed = 2;
				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';
				}
				timer = setInterval(move,30);
				oDiv.onmouseover = function() {
					clearInterval(timer);
				}
				oDiv.onmouseout = function() {
					timer = setInterval(move,30);
				}
				var oA = document.getElementsByTagName('a');
				oA[0].onmouseover = function(){
					speed = -2;
				};
				oA[1].onmouseover = function(){
					speed = 2;
				};	
			}
		</script>
		
	</head>
	<body>
		<div id='btn'>
			<a href="javascript:;">向左</a>
			<a href="javascript:;">向右</a>
		</div>
		
		<div id='div1'>
			<ul>
				<li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/07/232533qdz4fgqo0oko4okx.jpg"/></li>
				<li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/07/232534dg6gzhfjhee9i7jr.jpg"/></li>
				<li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/07/232534j7wvv79kowqvrsda.jpg"/></li>
				<li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/07/232533o4fsq4j4qjm8z8tb.jpg"/></li>
				<li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/07/232447x38d098zb9b8dose.jpg"/></li>
				
			</ul>
		</div>


	</body>
</html>

原文地址：http://www.w3cfuns.com/notes/32286/202f8916c6f5517def73eb6372f68b19.html

源辰_付

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS运动之让图片无缝滚动

无缝滚动 *{margin: 0; padding: 0; background: #C66;} #btn{ position: absolute; top: 50px; left: 710px; font-size: 24px; } #btn a{color: #FFF;text-decoration: none; } #btn
复制链接

扫一扫