<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">body,img,a,div,ul,li{margin: 0px;padding: 0px;} #div1{ width: 600px; height: 100px; background: red; position: relative; overflow: hidden; margin:0px auto; margin-top: 100px; } #div1 ul{ position: absolute; left: 0; top: 0; } #div1 ul li{ list-style: none; float: left; width: 150px; height: 100px; } #div1 ul li img{ width: 150px; height: 100px; } a{ display:block; width: 50px; height: 50px; background: orange; float: left; margin:; }</style><script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=document.getElementById('ul1'); var ali=document.getElementsByTagName('li'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=ali[0].offsetWidth*ali.length+'px'; var time=null; 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'; } time=setInterval(move,30); oDiv.onmousemove=function(){ clearInterval(time); }; oDiv.onmouseout=function(){ time=setInterval(move,30); }; document.getElementsByTagName('a')[0].onclick=function(){ speed=-2; }; document.getElementsByTagName('a')[1].onclick=function(){ speed=2; }; };</script></head><body><div id="div1"><ul id="ul1"><li ><img src="img/0.jpg"></li><li><img src="img/1.jpg"></li><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li></ul></div><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a></body></html>
2 回答
慕男婶
TA贡献98条经验 获得超73个赞
因为 oUl.offsetLeft 得到的结果可能是负值。
所以，在offsetWidth前面加了一个符号来比较大小。
注意：offsetWidth只能是正值。因为取的是宽度嘛，宽度哪儿有负值？
如果不加的话，
正数是永远大于负数的
添加回答
举报
0/150
提交
取消