Rumah >hujung hadapan web >tutorial js >JS实现的滚动栏效果（实例代码）

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

怪我咯asal: 2017-07-04 15:26:231553semak imbas

这篇文章主要介绍了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>

Atas ialah kandungan terperinci JS实现的滚动栏效果（实例代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js实现关闭js弹出层的窗口功能代码Artikel seterusnya：js程序设计之引用类型介绍

Artikel berkaitan

Lihat lagi