首页 > 文章 > web前端 > JS实现的滚动栏效果（实例代码）

JS实现的滚动栏效果（实例代码）

怪我咯原创: 2017-07-04 15:26:231521浏览

这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  * { 
   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; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var op=document.getElementById(&#39;p1&#39;); 
   var oUl=op.getElementsByTagName(&#39;ul&#39;)[0]; 
   var oLi=oUl.getElementsByTagName(&#39;li&#39;); 
   var oLeft=document.getElementById(&#39;leftp&#39;); 
   var oright=document.getElementById(&#39;rightp&#39;); 
   oUl.innerHTML+=oUl.innerHTML; 
   oUl.style.width=oLi[0].offsetWidth*oLi.length+&#39;px&#39;; 
   var speed=-2; 
   function move(){ 
    if (oUl.offsetLeft<-oUl.offsetWidth/2){ 
     oUl.style.left=&#39;0&#39;; 
    }else if(oUl.offsetLeft>0){ 
     oUl.style.left=-oUl.offsetWidth/2+&#39;px&#39;; 
    } 
    oUl.style.left=oUl.offsetLeft+speed+&#39;px&#39;; 
   }; 
   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> 
<p id="body"> 
 <p id="leftp"><button><img src="image/left.PNG"/></button></p> 
 <p id="p1"> 
  <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> 
 </p> 
 <p id="rightp"><button><img src="image/right.PNG"/></button></p> 
</p> 
</body> 
</html>

以上是JS实现的滚动栏效果（实例代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js实现关闭js弹出层的窗口功能代码下一篇：js程序设计之引用类型介绍

查看更多