JavaScript实现滚动栏效果的方法

5年以前 | 阅读数：536 次 | 编程语言：PHP

本文实例讲述了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"/></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>

希望本文所述对大家的javascript程序设计有所帮助。