物体运动基础
让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>
闲扯 Javascript 04 滚动条,码迷,mamicode.com
时间： 2024-10-04 11:41:41