js implementiert ein glattes Karussell am Anfang und Ende von Bildern-js-Tutorial-php.cn

js implementiert ein glattes Karussell am Anfang und Ende von Bildern

小云云

Freigeben： 2018-01-15 14:16:45

Original

1457 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich darum, ein reibungsloses Karussell am Anfang und Ende von Bildern zu erreichen (native JS-Methode – Drosselung). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Geben Sie zunächst den HTML-Code ein. Bitte beachten Sie, dass das erste Bild 1.jpg am Ende der Karussell-Bilderliste (#list) und das letzte Bild 5.jpg zum Header hinzugefügt wird.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首尾轮播</title>
 <link rel="stylesheet" href="首尾轮播.css" rel="external nofollow" >
<script src="首尾轮播.js"></script>
</head>
<body>
 <p id="container">
  <p id="list">
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/2.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/3.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/4.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p>
  </p>

  <p class="arrow" id="prev"><</p>
  <p class="arrow" id="next">></p>


 </p>  

</body> 

</html>

Nach dem Login kopieren

Als nächstes werden die CSS- und JS-Codes angegeben. Sie können die Parameter von Container und Liste entsprechend der Größe, Menge und Breite des Bildes anpassen Dabei ist auch die Kapselung von JS-Parametern zu berücksichtigen.

*{
 margin: 0;
 padding: 0;
}

#container{
 height: 400px;
 width: 500px;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 border: 1px solid black;
}

#list>p {
 float: left;
}
#list{
 position: absolute; 
 height: 400px;
 width: 3600px;
 
}

#list img{
 height: 400px;
 width: 500px;
}
.arrow {
 user-select:none;
 position: absolute;
 top:150px;
 z-index: 2;
 background-color: #aaa;
 height: 100px;
 width: 80px;
 cursor: pointer;
 opacity: 0.5;
 display: none;
 line-height: 100px;
 text-align: center;
 color: #222;
 font-size: 3em;

}
#container:hover .arrow{
 display: block;
}
 #prev{
 left:20px;
}

 #next{
 right: 20px;
}

Nach dem Login kopieren

In JS können wir die Geschwindigkeit des Bildwechsels steuern, indem wir die Geschwindigkeitsvariable ändern....Hier wird element.style.transition verwendet, um den Übergangseffekt zu steuern .

window.onload=function(){
 var container = document.getElementById(&#39;container&#39;);
 var list = document.getElementById(&#39;list&#39;);//获取图片容器
 var prev = document.getElementById(&#39;prev&#39;);//向前按钮
 var next = document.getElementById(&#39;next&#39;);//向后按钮
 var nowP = 1; //显示位置
 var judge = null; //执行权
 var speed = 0.1; // 切换速度 秒
 prev.onclick=function(){
  if(!judge){
    judge = setTimeout(function(){
     if(nowP==1){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-2500px";　
     nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 
     list.style.transition = "left "+speed+"s";
    move(500);
    nowP--;
    judge = null;
   },speed*1000);
  }
 };
 next.onclick=function(){
  if(!judge){    
    judge = setTimeout(function(){
     if(nowP==5){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-500px"; 
     nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 
    list.style.transition = "left "+speed+"s";
    move(-500);
    nowP++;
    judge = null;
   },speed*1000);
  }

 };

 function move(num){
  var term = parseInt(list.style.left) + num ; 
  list.style.left = term+"px";
 }

 var roll= setInterval(function(){
  next.onclick();
 },2000);

 container.onmouseenter=function(){
  clearInterval(roll);
 };

 container.onmouseleave=function()
  {
  roll=setInterval(function(){
  next.onclick();
  },2000);
 };

 
};

Nach dem Login kopieren

Das Folgende ist eine Demonstrationsdemo. Vereinfacht ausgedrückt besteht das Prinzip darin, beim Umschalten zum Anfang und Ende der Animation eine verzögerte Ausführung festzulegen Die Funktion setTimeout, deren Zeit mit der Übergangszeit der Animation übereinstimmt, wird verwendet, um ein sofortiges Umschalten durchzuführen, und anschließend wird eine Drosselung verwendet, um die maximale Umschaltgeschwindigkeit (Geschwindigkeit) sicherzustellen.

Ich bin auch ein Anfänger im Frontend, wenn es hilft, klicken Sie bitte auf die Empfehlung

Verwandte Empfehlungen:

Bootstrap-Bildrad So implementieren Sie den Broadcast-Effekt

Ein Beispiel für die Verwendung von JS zur Implementierung eines Bildkarussells

JQuery einfache und praktische Karussellimplementierung Methode

Das obige ist der detaillierte Inhalt vonjs implementiert ein glattes Karussell am Anfang und Ende von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!