這篇文章主要介紹了JavaScript實現滾動欄效果的方法,涉及javascript操作html元素實現滾動的相關技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了JavaScript實現滾動欄效果的方法。分享給大家供大家參考。具體如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#p1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#p1 ul li img {
width: 187px;
height: 125px;
}
#p1 ul li{
float: left;
width: 187px;
height: 125px;
list-style: none;
}
#p1{
width: 748px;
height: 125px;
position: relative;
background-color: chartreuse;
overflow: hidden;
float: left;
}
#body{
width: 948px;
height: 125px;
margin: 100px auto;
}
#body #leftp{
float: left;
width: 100px;
height: 100px;
}
#body #rightp{
float: left;
width: 100px;
height: 100px;
}
#body #leftp button{
background-image: url("image/left.PNG");
width: 100px;
height: 100px;
}
#body #leftp button img{
width: 100px;
height: 100px;
}
#body #rightp button img{
width: 100px;
height: 100px;
}
</style>
<script>
window.onload=function(){
var op=document.getElementById('p1');
var oUl=op.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById('leftp');
var oright=document.getElementById('rightp');
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>
<p id="body">
<p id="leftp"><button><img src="image/left.PNG"/></button></p>
<p id="p1">
<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>
</p>
<p id="rightp"><button><img src="image/right.PNG"/></button></p>
</p>
</body>
</html>以上是JS實現的滾動欄效果（實例代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
