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程序设计有所帮助。