服务器之家

服务器之家 > 正文

JavaScript实现滚动栏效果的方法

时间:2020-09-21 19:33     来源/作者:亲爱的汉尼拔

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

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

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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
返回顶部