闲扯 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>

 

你可能感兴趣的:(JavaScript)