《PHP學(xué)習(xí)：JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法》要點(diǎn)：
本文介紹了PHP學(xué)習(xí)：JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法，希望對(duì)您有用。如果有疑問(wèn)，可以聯(lián)系我們。
本文實(shí)例講述了JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法.分享給大家供大家參考.具體如下：PHP學(xué)習(xí)
<!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.onmou搜索引擎優(yōu)化ver=function(){
clearInterval(timer);
};
oUl.onmou搜索引擎優(yōu)化ut=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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助.PHP學(xué)習(xí)
維易PHP培訓(xùn)學(xué)院每天發(fā)布《PHP學(xué)習(xí)：JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法》等實(shí)戰(zhàn)技能，PHP、MYSQL、LINUX、APP、JS,CSS全面培養(yǎng)人才。
轉(zhuǎn)載請(qǐng)注明本頁(yè)網(wǎng)址：
http://www.snjht.com/jiaocheng/10972.html
