Von JS implementierter Bildlaufleisteneffekt (Beispielcode)-js-Tutorial-php.cn

Von JS implementierter Bildlaufleisteneffekt (Beispielcode)

怪我咯

Freigeben： 2017-07-04 15:26:23

Original

1475 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode von JavaScript zum Erzielen des Bildlaufleisteneffekts vorgestellt, wobei Techniken im Zusammenhang mit der JavaScript-Bearbeitung von HTML-Elementen zum Erzielen des Bildlaufs verwendet werden. Freunde, die dies benötigen, können sich darauf beziehen it

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JavaScript den Bildlaufleisteneffekt erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVon JS implementierter Bildlaufleisteneffekt (Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!