JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程
- WBOY原創
- 2016-07-13 09:56:02992瀏覽
JavaScript实现滚动栏效果的方法，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"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></button></div>
<div id="div1">
<ul>
<li><img src="image/1.JPG"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li>
<li><img src="image/2.JPG"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li>
<li><img src="image/3.JPG"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li>
<li><img src="image/4.JPG"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></li>
</ul>
</div>
<div id="rightDiv"><button><img src="image/right.PNG"/ alt="JavaScript实现滚动栏效果的方法，javascript滚动_PHP教程" ></button></div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn