前端学习无缝滚动

最新推荐文章于 2025-07-07 15:54:26 发布

原创最新推荐文章于 2025-07-07 15:54:26 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

style-left与offsetleft的区别

1.style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在
css里，style.left的值仍然为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置。
2. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，
还用offsetLeft比较方便。
offsetLeft是一个物体到达左边的距离，是个度量单位，而style.left是一个变量，可以有offsetLeft赋予它值。

无缝滚动

<!DOCTYPE html>
<html>
	<head>
		<title>js.xuexi</title>
		<link href="miaov_style.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementById('roll');
			var oUl=oDiv.getElementsByTagName('ul')[0];
			var aLi=oUl.getElementsByTagName('li');
			var oBtn=oDiv.getElementsByTagName('a');
			var ispeed=5;
			var timer=null;
			oUl.innerHTML+=oUl.innerHTML;
			oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
			
			timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+ispeed+'px';
				if(oUl.offsetLeft<-oUl.offsetWidth/2)
				{
					oUl.style.left='0px';
				}
				else if(oUl.offsetLeft>0)
				{
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			
			},30);

		
			oBtn[0].onmouseover=function(){
		 		ispeed=-5;
			};
			oBtn[1].onmouseover=function(){
				ispeed=5;
			};
			oUl.onmouseover=function(){
				clearInterval(timer);

			}
			oUl.onmouseout=function(){

				timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+ispeed+'px';
				if(oUl.offsetLeft<-oUl.offsetWidth/2)
				{
					oUl.style.left='0px';
				}
				else if(oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			
			},30);
		
		};
	};





		</script>
	</head>
<body>
	
	<div class="roll" id="roll">
	    <a href="javascript:void(0);" class="btn_left"></a>
	    <a href="javascript:void(0);" class="btn_right"></a>
	    <div class="wrap">
	        <ul>
	            <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
	            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
	            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
	            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
	        </ul>
	    </div>
	</div>
</body>
</html>