JavaScript实现滚动栏效果的方法

这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head lang="en">  
4. <meta charset="UTF-8">  
5. <title></title>  
6. <style>  
7. * {  
8. margin: 0;  
9. padding: 0;  
10. } 
11. #div1 ul{  
12. position: absolute;  
13. left: 0px;  
14. top: 0px;  
15. } 
16. #div1 ul li img {  
17. width: 187px;  
18. height: 125px;  
19. } 
20. #div1 ul li{  
21. float: left;  
22. width: 187px;  
23. height: 125px;  
24. list-style: none;  
25. } 
26. #div1{  
27. width: 748px;  
28. height: 125px;  
29. position: relative;  
30. background-color: chartreuse;  
31. overflow: hidden;  
32. float: left;  
33. } 
34. #body{  
35. width: 948px;  
36. height: 125px;  
37. margin: 100px auto;  
38.  
39. } 
40. #body #leftDiv{  
41. float: left;  
42. width: 100px;  
43. height: 100px;  
44. } 
45. #body #rightDiv{  
46. float: left;  
47. width: 100px;  
48. height: 100px;  
49. } 
50.  
51. #body #leftDiv button{  
52. background-image: url("image/left.PNG");  
53. width: 100px;  
54. height: 100px;  
55. } 
56. #body #leftDiv button img{  
57. width: 100px;  
58. height: 100px;  
59. } 
60. #body #rightDiv button img{  
61. width: 100px;  
62. height: 100px;  
63. }  
64. </style>  
65. <script>  
66. window.onload=function(){  
67. var oDiv=document.getElementById('div1');  
68. var oUl=oDiv.getElementsByTagName('ul')[0];  
69. var oLi=oUl.getElementsByTagName('li');  
70. var oLeft=document.getElementById('leftDiv');  
71. var oright=document.getElementById('rightDiv');  
72. oUl.innerHTML+=oUl.innerHTML;  
73. oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';  
74. var speed=-2;  
75. function move(){  
76. if (oUl.offsetLeft<-oUl.offsetWidth/2){  
77. oUl.style.left='0';  
78. }else if(oUl.offsetLeft>0){  
79. oUl.style.left=-oUl.offsetWidth/2+'px';  
80. }  
81. oUl.style.left=oUl.offsetLeft+speed+'px';  
82. };  
83. var timer=setInterval(move,30);  
84. oLeft.onclick=function(){  
85. speed=-2;  
86. };  
87. oright.onclick= function () {  
88. speed=2;  
89. };  
90. oUl.onmouseover=function(){  
91. clearInterval(timer);  
92. };  
93. oUl.onmouseout=function(){  
94. timer=setInterval(move,30);  
95. };  
96. }  
97. </script>  
98. </head>  
99. <body>  
100. <div id="body">  
101. <div id="leftDiv"><button><img src="image/left.PNG"/></button></div>  
102. <div id="div1">  
103. <ul>  
104. <li><img src="image/1.JPG"/></li>  
105. <li><img src="image/2.JPG"/></li>  
106. <li><img src="image/3.JPG"/></li>  
107. <li><img src="image/4.JPG"/></li>  
108. </ul>  
109. </div>  
110. <div id="rightDiv"><button><img src="image/right.PNG"/></button></div>  
111. </div>  
112. </body>  
113. </html> 

希望本文所述对大家的javascript程序设计有所帮助。