JavaScript实现滚动栏效果的方法

　　JavaScript实现滚动栏效果的方法

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

　　本文实例讲述了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程序设计有所帮助。

时间： 2024-11-03 11:51:27

JavaScript实现滚动栏效果的方法

JavaScript实现滚动栏效果的方法的相关文章

JavaScript实现滚动栏效果的方法_php技巧

Javascript实现飞动广告效果的方法

JavaScript实现鼠标拖动效果的方法

javascript实现链接单选效果的方法_javascript技巧

javascript实现下班倒计时效果的方法(可桌面通知)_javascript技巧

JavaScript实现彩虹文字效果的方法_javascript技巧

使用JavaScript实现连续滚动字幕效果的方法_javascript技巧

javascript实现焦点滚动图效果具体方法_javascript技巧

最精简的JavaScript实现鼠标拖动效果的方法_javascript技巧