Heim > Artikel > Web-Frontend > Informationen zur Implementierung des JavaScript-Karussell-Stay-Effekts

Informationen zur Implementierung des JavaScript-Karussell-Stay-Effekts

不言Original: 2018-07-04 10:22:531114Durchsuche

Im folgenden Artikel erfahren Sie, wie Sie den Karussell-Aufenthaltseffekt von JavaScript implementieren, der dem drahtlosen Scrollen sehr ähnlich ist. Interessierte Freunde, werfen wir einen Blick darauf

1. Ideen

1. Der Karussellaufenthalt ist dem drahtlosen Scrollen sehr ähnlich, beide verwenden Attribute und Variablen Steuern Sie die Bewegung, um das Karussell zu erreichen.

2. Der Unterschied besteht darin, dass der Karussellaufenthalt Übergangsattribute und Timer hinzufügen muss

1. Schreiben Sie den Grundstrukturstil

Sie müssen am Ende ein weiteres Bild hinzufügen Um das Umschalten zu verhindern, fügen Sie das Karussell-Aufenthaltsereignis direkt hinzu Hinweis: Wenn das Karussell das letzte Bild erreicht, muss der setTimeout-Timer eliminiert werden. Es erfolgt keine Verzögerung, nachdem das letzte Bild der Karte gedreht wurde, und es wird direkt zum ersten Bild gesprungen. Da das erste Bild mit dem letzten Bild identisch ist, entsteht ein visueller blinder Fleck, der wie ein kontinuierlicher Karusselleffekt aussieht

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

3. Fügen Sie das Ereignis des Ein- und Ausblendens des Indexkreises hinzu

Der Unterschied besteht darin, dass das Karussell nicht aufgerufen werden muss Bleiben Sie hier, und der aktuelle Index wird direkt verwendet, um das Bild zu indizieren, um der Transformation zu folgen. Beachten Sie, dass der

-Wert am Ende markiert werden muss, damit das Standardverhalten nach dem aktuellen erneut ausgeführt wird angezeigtes Bild;

//进入索引圈事件
for(var j=0;j<circle.length;j++){
 circle[j].index=j;
 circle[j].onmouseenter=function(){
  for(var k=0;k<circle.length;k++){
   circle[k].style.backgroundColor="";
  }
  this.style.backgroundColor="red";
  //图片跟随移动
  box.className="box anmint";
  box.style.marginLeft=(-800*this.index)+"px";
  count=this.index;
 }
}

4. Verbessern Sie den Ein- und Ausstiegscode der Maus

count=this.index Rendering:

Vollständiger Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>JS轮播停留效果</title> 
 <style> 
  *{margin: 0;padding: 0;} 
  html,body{width: 100%;height: 100%;} 
  .block{ 
   width: 800px; 
   height: 400px; 
   margin: 80px auto; 
   position: relative; 
   border: 1px solid red; 
   overflow: hidden; 
  } 
  .box{ 
   width: 5600px; 
   height: 400px; 
   float: left; 
  } 
  .anmint{ 
   transition: all 0.5s ease-in-out; 
  } 
  img{ 
   width: 800px; 
   height: 400px; 
   float: left; 
  } 
  .cir{ 
   width: 150px; 
   height: 20px; 
   z-index: 7; 
   position: absolute; 
   bottom: 10px; 
   left: 320px; 
  } 
  .circle{ 
   width: 10px; 
   height: 10px; 
   border: 2px solid grey; 
   border-radius: 50%; 
   float: left; 
   margin: 0 5px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var box=document.getElementsByClassName("box")[0]; 
   var count=0; 
   //索引圈事件 
   var circle=document.getElementsByClassName("circle"); 
   circle[0].style.backgroundColor="red"; 
   var time=setInterval(function(){ 
    move(); 
   },2000); 
   //鼠标进入事件 
   var block=document.getElementsByClassName("block")[0]; 
   block.onmouseenter=function(){ 
    clearInterval(time); 
   }; 
   //鼠标离开事件 
   block.onmouseleave=function(){ 
    time=setInterval(function(){ 
     move(); 
    },2000); 
   }; 
   //进入索引圈事件 
   for(var j=0;j<circle.length;j++){ 
    circle[j].index=j; 
    circle[j].onmouseenter=function(){ 
     for(var k=0;k<circle.length;k++){ 
      circle[k].style.backgroundColor=""; 
     } 
     this.style.backgroundColor="red"; 
     //图片跟随移动 
     box.className="box anmint"; 
     box.style.marginLeft=(-800*this.index)+"px"; 
     count=this.index; 
    } 
   } 
   //轮播停留方法 
   function move() { 
    box.className = "box anmint"; 
    circle[count].style.backgroundColor = ""; 
    count++; 
    box.style.marginLeft = (-800 * count) + "px"; 
    //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换 
    setTimeout(function () { 
      if (count >= 6) { 
       count = 0; 
       box.className = "box"; 
       //marginLeft=0之前去除过渡属性 
       box.style.marginLeft = "0px"; 
      } 
     circle[count].style.backgroundColor = "red"; 
    }, 500); 
   } 
  } 
 </script> 
</head> 
<body> 
<p class="block"> 
 <p class="box"> 
   <img class="imgg" src="./image/box1.jpg"> 
   <img class="imgg" src="./image/box2.jpg"> 
   <img class="imgg" src="./image/box3.jpg"> 
   <img class="imgg" src="./image/box4.jpg"> 
   <img class="imgg" src="./image/box5.jpg"> 
   <img class="imgg" src="./image/box6.jpg"> 
   <img class="imgg" src="./image/box1.jpg"> 
 </p> 
 <p class="cir"> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
 </p> 
</p> 
</body> 
</html>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Über die Verwendung der Karusselldiagrammkomponente von vue.js

VUE 3D-Karusselldiagramm-Kapselungsimplementierungsmethode

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierung des JavaScript-Karussell-Stay-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Informationen zur Variablenförderung und Funktionsförderung in JavascriptNächster Artikel：Informationen zur Variablenförderung und Funktionsförderung in Javascript

In Verbindung stehende Artikel

Mehr sehen