Detaillierte Erläuterung der Schritte zur Implementierung des JS-Karussell-Stay-Effekts

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Implementierung des JS-Karussell-Stay-Effekts geben. Was sind die Vorsichtsmaßnahmen, um den JS-Karussell-Stay-Effekt zu implementieren? sehen.

1. Ideen

1. Karussell-Aufenthalt ist dem drahtlosen Scrollen sehr ähnlich, beide verwenden Attribute und Variablen, um die Bewegung zu steuern, um Karussell zu implementieren;

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

Schritte

1. Schreiben Sie den grundlegenden Strukturstil

Sie müssen am Ende ein weiteres Bild hinzufügen, um Jitter beim Umschalten zu vermeiden; 🎜>

2. Fügen Sie das Karussell-Aufenthaltsereignis basierend auf der vorherigen Grundlage direkt zum Karussell-Aufenthaltsereignis hinzu der letzte, Der setTimeout-Timer wird hier verwendet. Es gibt keine Verzögerung, nachdem das letzte Bild der Karte gedreht wurde, und es wird direkt zum ersten Bild gesprungen Als letztes Bild wird ein visueller blinder Fleck gebildet, der wie ein kontinuierlicher Karusselleffekt aussieht. 3 Fügen Sie das Ereignis des Eintritts in den Indexkreis hinzu ist im Grunde dasselbe wie das Ein- und Ausblenden des Indexkreises. Der Unterschied besteht darin, dass das Karussell hier nicht aufgerufen werden muss. Verwenden Sie für Aufenthaltsereignisse direkt den aktuellen Index, um der Transformationsnotiz zu folgen dass der

-Wert am Ende markiert werden muss, damit bei erneuter Ausführung des Standardverhaltens das Standardverhalten rückwärts ausgeführt wird und dem aktuell angezeigten Bild folgt

//轮播停留方法
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);
}

4 Maus-Ein- und Ausstiegscode

Rendering:

count=this.index

Vollständiger Code:

//进入索引圈事件
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;
 }
}

Ich glaube, Sie haben diesen Artikel gelesen. Sie haben ihn gemeistert Weitere spannende Informationen finden Sie in den anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung regulärer Ausdrücke in Linux

Implementierung der Funktion zum Speichern von Bildern und sie im Miniprogramm an Moments weiterzugeben

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des JS-Karussell-Stay-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!