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

JavaScript实现滚动栏效果的方法

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论