JavaScript实现滚动栏效果的方法
本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#div1ul{
position:absolute;
left:0px;
top:0px;
}
#div1ulliimg{
width:187px;
height:125px;
}
#div1ulli{
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:100pxauto;
}
#body#leftDiv{
float:left;
width:100px;
height:100px;
}
#body#rightDiv{
float:left;
width:100px;
height:100px;
}
#body#leftDivbutton{
background-image:url("image/left.PNG");
width:100px;
height:100px;
}
#body#leftDivbuttonimg{
width:100px;
height:100px;
}
#body#rightDivbuttonimg{
width:100px;
height:100px;
}
</style>
<script>
window.onload=function(){
varoDiv=document.getElementById('div1');
varoUl=oDiv.getElementsByTagName('ul')[0];
varoLi=oUl.getElementsByTagName('li');
varoLeft=document.getElementById('leftDiv');
varoright=document.getElementById('rightDiv');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
varspeed=-2;
functionmove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}elseif(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
vartimer=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>
<divid="body">
<divid="leftDiv"><button><imgsrc="image/left.PNG"/></button></div>
<divid="div1">
<ul>
<li><imgsrc="image/1.JPG"/></li>
<li><imgsrc="image/2.JPG"/></li>
<li><imgsrc="image/3.JPG"/></li>
<li><imgsrc="image/4.JPG"/></li>
</ul>
</div>
<divid="rightDiv"><button><imgsrc="image/right.PNG"/></button></div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。