闲扯 Javascript 04 滚动条
物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
效果原理
让ul一直向左移动
复制li
innerHTML和+=
修改ul的width
滚动过界后，重设位置
判断过界
改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
1 <style> 2 *{ margin:0px; padding:0px;} 3 #div1{ width:712px; height:108px; margin:100px auto; position:relative; background:#F00; overflow:hidden;} 4 #div1 ul{ position:absolute; left:0px; top:0px; } 5 #div1 ul li{ float:left; list-style:none; width:178px; height:108px;} 6 </style> 7 <script> 8 9 window.onload=function () 10 { 11 var oDiv=document.getElementById('div1'); 12 var oUl=oDiv.getElementsByTagName('ul')[0]; 13 var oLi=oDiv.getElementsByTagName('li'); 14 15 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; 16 oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; 17 var num=-2; 18 19 function move() 20 { 21 if(oUl.offsetLeft<-oUl.offsetWidth/2) 22 { 23 oUl.style.left='0'; 24 } 25 if(oUl.offsetLeft>0) 26 { 27 oUl.style.left=-oUl.offsetWidth/2+'px'; //当oUl.style.left>0 也就是left 到达右边，后面跟着出现红色，此时只需把它的宽度拉到offsetWidth的中段(oUl的宽度)即可 28 } 29 oUl.style.left=oUl.offsetLeft+num+'px'; 30 } 31 32 timer=setInterval( move 33 ,30) 34 oDiv.onmouseover=function () 35 { 36 clearInterval(timer); 37 }; 38 39 oDiv.onmouseout=function () 40 { 41 timer=setInterval(move, 30); 42 }; 43 44 document.getElementsByTagName('a')[0].onclick=function () 45 { 46 num=-2; 47 } 48 document.getElementsByTagName('a')[1].onclick=function (){ num=2;} 49 50 51 52 }; 53 54 55 </script> 56 </head> 57 58 <body> 59 <a href="#">向左走</a> 60 <a href="#">向右走</a> 61 <div id="div1"> 62 <ul> 63 64 <li> <img src="images/1.jpg"/></li> 65 <li> <img src="images/2.jpg"/></li> 66 <li> <img src="images/3.jpg"/></li> 67 <li> <img src="images/4.jpg"/></li> 68 69 </ul> 70 </div> 71 </body>
