這篇文章主要介紹了JavaScript實現滾動欄效果的方法,涉及javascript操作html元素實現滾動的相關技巧,非常具有實用價值,需要的朋友可以參考下 本文實例講述了JavaScript實現滾動欄效果的方法。分享給大家供大家參考。具體如下： * { 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; } 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); }; }
