Home >Web Front-end >JS Tutorial >Scroll bar effect implemented by JS (example code)

Scroll bar effect implemented by JS (example code)

怪我咯Original: 2017-07-04 15:26:231550browse

This article mainly introduces JavaScript methods to achieve the scroll bar effect, involving techniques related to JavaScript operating html elements to achieve scrolling. It is of great practical value. Friends in need can refer to it

The example in this article describes how to implement the scroll bar effect in JavaScript. Share it with everyone for your reference. The details are as follows:

<!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>

The above is the detailed content of Scroll bar effect implemented by JS (example code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js implements the window function code for closing the js pop-up layerNext article：js implements the window function code for closing the js pop-up layer

See more

Scroll bar effect implemented by JS (example code)

Related articles