JavaScript实现滚动栏效果的方法
程序员文章站
2022-05-22 13:14:51
本文实例讲述了javascript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：
...
本文实例讲述了javascript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：
<!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程序设计有所帮助。
推荐阅读