So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)

Bevor wir JSX zum Erstellen eines Komponentensystems verwenden, lernen wir anhand eines Beispiels das Implementierungsprinzip und die Logik der Komponente kennen. Hier verwenden wir eine Karussellkomponente als Lernbeispiel. Der englische Name des Karussells ist Carousel, was Karussell bedeutet.

Der Code, den wir im vorherigen Artikel „Verwenden von JSX zum Festlegen des Markup-Komponentenstils“ implementiert haben, kann eigentlich nicht als Komponentensystem bezeichnet werden. Er kann höchstens als einfache Kapselung von DOM dienen und uns ermöglichen, DOM anzupassen.

Um diese Karussellkomponente zu erstellen, sollten wir mit der einfachsten DOM-Operation beginnen. Verwenden Sie DOM-Operationen, um zunächst die gesamte Karussellfunktion zu implementieren, und überlegen Sie dann, wie Sie sie Schritt für Schritt in ein Komponentensystem integrieren.

TIPPS : Wenn wir mit der Entwicklung einer Komponente beginnen, denken wir oft zu viel darüber nach, wie eine Funktion gestaltet werden sollte, und implementieren sie dann auf sehr komplizierte Weise. Besser ist es tatsächlich, das Gegenteil zu tun: Implementieren Sie zuerst die Funktion und entwerfen Sie dann durch Analyse dieser Funktion ein Komponentenarchitektursystem.

Da es sich um ein Karussell handelt, müssen wir natürlich Bilder verwenden. Deshalb habe ich hier 4 Open-Source-Bilder von Unsplash vorbereitet. Natürlich können Sie diese auch durch Ihre eigenen Bilder ersetzen. Zuerst fügen wir diese vier Bilder in eine gallery ein:

Galerie lassen = [
 'https://source.unsplash.com/Y8lCoTRgHPE/1142x640',
 'https://source.unsplash.com/v7daTKlZzaw/1142x640',
 'https://source.unsplash.com/DlkF4-dbCOU/1142x640',
 'https://source.unsplash.com/8SQ6xjkxkCo/1142x640',
];

Unser Ziel ist es, diese 4 Bilder rotieren zu lassen.

Einkapselung der unteren Komponentenschicht

Zuerst müssen wir den zuvor geschriebenen Code kapseln, damit wir mit dem Schreiben dieser Komponente beginnen können.

• Erstellen Sie framework.js im Stammverzeichnis
• Verschieben Sie createElement , ElementWrapper und TextWrapper in unsere Datei framework.js
• Dann muss die Methode createElement exportiert werden, damit wir diese grundlegende Methode zum Erstellen von Elementen einführen können.
• ElementWrapper und TextWrapper müssen nicht exportiert werden, da sie intern von createElement verwendet werden.
• Kapseln Sie die gemeinsamen Teile der Wrapper-Klasse
• ElementWrapper und TextWrapper haben dieselben setAttribute , appendChild und mountTo , die wiederholt und gemeinsam sind.
• Wir können also eine Component erstellen und diese drei Methoden in
• Dann lassen Sie ElementWrapper und TextWrapper Component erben
• Komponente fügt render()-Methode hinzu
•      Fügen Sie der Komponentenklasse einen Konstruktor hinzu

Auf diese Weise haben wir den Code des zugrunde liegenden Frameworks unserer Komponente gekapselt. Das Codebeispiel lautet wie folgt:

Funktion createElement(Typ, Attribute, ...Kinder) {
 //Element erstellen let element;
 wenn (Typ von Typ === 'Zeichenfolge') {
 Element = neuer ElementWrapper(Typ);
 } anders {
 Element = neuer Typ();
 }

 //Attribute für (Name in Attributen lassen) aufhängen {
 element.setAttribute(name, Attribute[name]);
 }
 //Alle untergeordneten Elemente anhängen für (let child of children) {
 wenn (Typ des untergeordneten Elements === 'Zeichenfolge') untergeordnetes Element = neuer TextWrapper(untergeordnetes Element);
 element.appendChild(Kind);
 }
 //Schließlich ist unser Element ein Knoten// also können wir direkt das Return-Element zurückgeben;
}

Exportklasse Komponente {
 Konstruktor() {
 }
 // Die Attribute des Elements mounten setAttribute(name, attribute) {
 this.root.setAttribute(Name, Attribut);
 }
 // Element untergeordnetes Element mounten appendChild(child) {
 Kind.mountTo(diese.Wurzel);
 }
 // Das aktuelle Element mounten mountTo(parent) {
 übergeordnetes Element.anhängenKind(diese.Wurzel);
 }
}

Klasse ElementWrapper erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen Konstruktor (Typ) {
 this.root = document.createElement(Typ);
 }
}

Klasse TextWrapper erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen Konstruktor (Inhalt) {
 this.root = document.createTextNode(Inhalt);
 }
}

Implementierung von Carousel

Als nächstes werden wir mit der Transformation unseres main.js fortfahren. Zuerst müssen wir Div in Carousel ändern und es die von uns geschriebene übergeordnete Component-Klasse erben lassen, damit wir die Duplizierung einiger Methoden vermeiden können.

Nachdem wir die Komponente geerbt haben, müssen wir unsere Komponente aus framework.js importieren.

Hier können wir offiziell mit der Entwicklung von Komponenten beginnen, aber es wäre sehr mühsam, wenn wir sie jedes Mal manuell mit webpack verpacken müssten. Um uns das Debuggen des Codes zu erleichtern, installieren wir hier den Webpack-Entwicklungsserver, um dieses Problem zu lösen.

Führen Sie den folgenden Code aus, um webpack-dev-server zu installieren:

npm install --save-dev webpack-dev-server webpack-cli 

Das obige Ergebnis beweist, dass unsere Installation erfolgreich war. Wir konfigurieren besser den laufenden Ordner unseres Webpack-Servers. Hier verwenden wir die gepackte dist als unser laufendes Verzeichnis.

Um dies festzulegen, müssen wir unsere webpack.config.js öffnen, den devServer -Parameter hinzufügen und contentBase -Pfad in ./dist angeben.

modul.exporte = {
 Eintrag: './main.js',
 Modus: "Entwicklung",
 devServer: {
 Inhaltsbasis: "./dist",
 },
 Modul: {
 Regeln:
 {
 Test: /\.js$/,
 verwenden: {
 Lader: 'babel-loader',
 Optionen:
 Voreinstellungen: ['@babel/preset-env'],
 Plugins: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]],
 },
 },
 },
 ],
 },
};

Jeder, der schon einmal Vue oder React verwendet hat, weiß, dass man zum Starten eines lokalen Debugging-Umgebungsservers nur den Befehl npm ausführen muss. Auch hier legen wir einen Schnellstartbefehl fest. Öffnen Sie unsere package.json und fügen Sie in scripts eine Zeile "start": "webpack start" hinzu.

{
 "Name": "jsx-Komponente",
 "version": "1.0.0",
 "Beschreibung": "",
 "main": "index.js",
 "Skripte": {
 "test": "echo \"Fehler: kein Test angegeben\" && exit 1",
 "Start": "WebPack-Server"
 },
 "Autor": "",
 "Lizenz": "ISC",
 "devAbhängigkeiten": {
 "@babel/core": "^7.12.3",
 "@babel/plugin-transform-react-jsx": "^7.12.5",
 "@babel/preset-env": "^7.12.1",
 "babel-loader": "^8.1.0",
 "webpack": "^5.4.0",
 "webpack-cli": "^4.2.0",
 "webpack-dev-server": "^3.11.0"
 },
 "Abhängigkeiten": {}
}

Auf diese Weise können wir den folgenden Befehl direkt ausführen, um unseren lokalen Debugging-Server zu starten!

npm starten 

Nachdem wir dies aktiviert haben, wird jede Änderung einer Datei überwacht, sodass die Datei in Echtzeit für uns verpackt wird, was für die Fehlerbehebung sehr praktisch ist. Wie in der Abbildung oben gezeigt, lautet unsere lokale Echtzeit-Serveradresse http://localhost:8080 . Wir können auf dieses Projekt zugreifen, indem wir diese Adresse direkt im Browser öffnen.

Hierbei ist zu beachten, dass wir das laufende Verzeichnis in „dist“ geändert haben, da unsere vorherige Datei „main.html“ im Stammverzeichnis abgelegt war. Daher können wir diese HTML-Datei auf „localhost:8080“ nicht finden. Daher müssen wir „main.html“ in das Verzeichnis „dist“ verschieben und den Importpfad von „main.js“ ändern.

<!-- main.html-Code -->
<Körper></Körper>

<script src="./main.js"></script>

Nachdem wir den Link geöffnet hatten, stellten wir fest, dass die Karussellkomponente erfolgreich gemountet wurde, was beweist, dass bei unserer Codekapselung kein Problem vorliegt.

Als nächstes werden wir mit der Implementierung unserer Karussellfunktion fortfahren. Zuerst müssen wir unsere Bilddaten an unsere Karussellkomponente übergeben.

lass a = <Karussell src={gallery}/>;

Auf diese Weise wird unser gallery Array auf unser src Attribut eingestellt. Aber unser src Attribut wird nicht für unser Karussellelement selbst verwendet. Das heißt, wir sind nicht mehr direkt an this.root angehängt wie zuvor.

Daher müssen wir die Daten dieser Quelle separat speichern und sie später zum Generieren der Bildanzeigeelemente unseres Karussells verwenden. In React werden props zum Speichern von Elementeigenschaften verwendet, hier verwenden wir jedoch attributes was der Bedeutung von Eigenschaften näher kommt, um sie zu speichern.

Da wir die eingehenden Attribute in der Variable this.attributes speichern müssen, müssen wir dieses Klassenattribut im constructor der Komponentenklasse initialisieren.

Dann müssen wir diese Attribute in Klasseneigenschaften speichern, anstatt sie auf Elementknoten zu mounten. Daher müssen wir unsere setAttribute -Methode in der Komponentenklasse neu definieren.

Wir müssen den Wert des src-Attributs abrufen, bevor die Komponente gerendert wird. Daher müssen wir den Render-Trigger in mountTo einfügen.

Klasse Karussell erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen konstruktor() {
 super();
 diese.attribute = Objekt.erstellen(null);
 }
 setAttribute(name, wert) {
 this.attributes[name] = Wert;
 }
 rendern() {
	Konsole.log(diese.Attribute);
 gibt document.createElement('div') zurück;
 }
 mountTo() {
 übergeordnetes Element.anhängenKind(dieses.render());
 }
}

Schauen wir uns als Nächstes die tatsächlichen Laufergebnisse an, um zu sehen, ob wir die Bilddaten abrufen können.

Als nächstes werden wir diese Bilder anzeigen. Hier müssen wir die Rendermethode ändern und die Logik zum Rendern des Bildes hier hinzufügen:

• Zuerst müssen wir die neu erstellten Elemente speichern
• Durchlaufen Sie unsere Bilddaten und erstellen Sie für jedes Datenelement ein img-Element.
• Fügen Sie jedem img-Element src = Bild-URL hinzu
• Hängen Sie das Bildelement mit dem src-Attribut in unser Komponentenelement this.root
• Lassen Sie die Rendermethode schließlich this.root zurückgeben.

Klasse Karussell erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen konstruktor() {
 super();
 diese.attribute = Objekt.erstellen(null);
 }
 setAttribute(name, wert) {
 this.attributes[name] = Wert;
 }
 rendern() {
 dies.root = Dokument.createElement('div');

 für (let Bild von this.attributes.src) {
 let child = document.createElement('img');
 child.src = Bild;
 dies.root.appendChild(Kind);
 }

 gib dies.root zurück;
 }
 mountTo(übergeordnet) {
 übergeordnetes Element.anhängenKind(dieses.render());
 }
} 

Auf diese Weise können wir sicherstellen, dass unsere Bilder auf unserer Seite korrekt angezeigt werden.

Typografie und Animation

Zunächst einmal sind die Elemente unserer Bilder alle img-Tags, aber wenn wir dieses Tag verwenden, kann es gezogen werden, wenn wir klicken und ziehen. Dies kann natürlich gelöst werden, aber um dieses Problem einfacher zu lösen, ersetzen wir das img durch ein div und verwenden dann das Hintergrundbild.

Standardmäßig hat ein Div weder eine Breite noch eine Höhe, daher müssen wir der Div-Ebene der Komponente eine Klasse namens carousel “ hinzufügen, dann ein CSS-Stylesheet zum HTML hinzufügen, jedes Div unter dem Karussell direkt auswählen und ihnen dann die entsprechenden Stile zuweisen.

// Haupt.js
Klasse Karussell erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen konstruktor() {
 super();
 diese.attribute = Objekt.erstellen(null);
 }
 setAttribute(name, wert) {
 this.attributes[name] = Wert;
 }
 rendern() {
 dies.root = Dokument.createElement('div');
	this.root.addClassList('carousel'); // Karussellklasse hinzufügen

 für (let Bild von this.attributes.src) {
 let child = document.createElement('div');
 child.backgroundImage = `url('${picture}')`;
 dies.root.appendChild(Kind);
 }

 gib dies.root zurück;
 }
 mountTo(übergeordnet) {
 übergeordnetes Element.anhängenKind(dieses.render());
 }
}

<!-- main.html -->
<Kopf>
 <Stil>
 .Karussell > div {
 Breite: 500px;
 Höhe: 281px;
 Hintergrundgröße: enthalten;
 }
 </Stil>
</Kopf>

<Körper></Körper>

<script src="./main.js"></script>

Hier beträgt unsere Breite 500 Pixel, aber wenn wir eine Höhe von 300 Pixel einstellen, stellen wir fest, dass das Bild am unteren Rand des Bildes wiederholt wird. Dies liegt daran, dass das Verhältnis des Bildes 1600 x 900 beträgt und das Verhältnis 500 x 300 nicht mit dem ursprünglichen Verhältnis des Bildes übereinstimmt.

Durch proportionale Berechnung können wir also eine Höhe wie folgt erhalten: 500 ÷ 1900 × 900 = 281. xxx 500\div1900\times900 = 281.xxx 500÷1900×900=281.xxx. Die einer Breite von 500 Pixeln entsprechende Höhe beträgt also etwa 281 Pixel. Auf diese Weise können unsere Bilder normal in einem Div angezeigt werden.

Es ist offensichtlich unmöglich, dass ein Karussell alle Bilder anzeigt. Die uns bekannten Karussells zeigen die Bilder einzeln an. Zuerst müssen wir dafür sorgen, dass die Karussell-Div-Elemente außerhalb der Bilder eine Box mit der gleichen Breite und Höhe wie sie haben, und dann legen wir overflow: hidden . Auf diese Weise ragen die anderen Bilder über die Box hinaus und werden somit ausgeblendet.

Einige Studenten fragen sich vielleicht: „Warum ändern wir die Anzeige nicht bei anderen Bildern auf: ausgeblendet oder Deckkraft: 0?“ Denn wenn sich unser Karussell dreht, können Sie tatsächlich das aktuelle Bild und das nächste Bild sehen. Wenn wir also das versteckte Attribut wie „display:hidden“ verwenden, wird es schwierig, die folgenden Effekte zu erzielen.

Dann haben wir noch ein weiteres Problem. Karussellbilder gleiten im Allgemeinen nach links und rechts und selten nach oben und unten. Die Bilder hier sind jedoch standardmäßig von oben nach unten angeordnet. Hier müssen wir also die Anordnung der Bilder anpassen, damit diese in einer Reihe aufgenommen werden.

Hier können wir den normalen Ablauf verwenden, wir müssen also nur ein display: inline-block zum div hinzufügen, um sie in einer Reihe anzuordnen. Wenn das Bild jedoch nur mit diesem Attribut die Fensterbreite überschreitet, wird es automatisch umbrochen, daher müssen wir auch das Attribut white-space: nowrap zum übergeordneten Element hinzufügen, um ein Nichtumbrechen zu erzwingen. Und das ist alles.

<Kopf>
 <Stil>
 .Karussell {
 Breite: 500px;
 Höhe: 281px;
 Leerzeichen: Nowrap;
 Überlauf: versteckt;
 }

 .Karussell > div {
 Breite: 500px;
 Höhe: 281px;
 Hintergrundgröße: enthalten;
 Anzeige: Inline-Block;
 }
 </Stil>
</Kopf>

<Körper></Körper>

<script src="./main.js"></script>

Als nächstes implementieren wir den automatischen Karusselleffekt. Zuvor fügen wir diesen Bildelementen einige Animationseigenschaften hinzu. Hier verwenden wir transition , um die Dauer der Elementanimation zu steuern. Im Allgemeinen verwenden wir 0.5 Sekunden ease um ein Bild abzuspielen.

Der Übergang nutzt im Allgemeinen nur die Eigenschaft „Ease“, außer in einigen ganz besonderen Fällen, in denen „Ease-In“ für Ausstiegsanimationen und „Ease-Out“ für Einstiegsanimationen verwendet wird. Auf demselben Bildschirm verwenden wir normalerweise standardmäßig „Ease“, in den meisten Fällen jedoch nie „Linear“. Denn Leichtigkeit ist die Bewegungskurve, die am besten zu den menschlichen Sinnen passt.

<Kopf>
 <Stil>
 .Karussell {
 Breite: 500px;
 Höhe: 281px;
 Leerzeichen: Nowrap;
 Überlauf: versteckt;
 }

 .Karussell > div {
 Breite: 500px;
 Höhe: 281px;
 Hintergrundgröße: enthalten;
 Anzeige: Inline-Block;
 Übergang: Leichtigkeit 0,5 s;
 }
 </Stil>
</Kopf>

<Körper></Körper>

<script src="./main.js"></script>

Implementieren Sie ein automatisches Karussell

Mit der Eigenschaft des Animationseffekts können wir unseren Timer in JavaScript hinzufügen, um unser Bild alle drei Sekunden zu wechseln. Wir können dieses Problem lösen, indem wir setInerval() verwenden.

Aber wie können wir die Bilder drehen oder bewegen? Haben Sie beim Nachdenken über Bewegung in HTML schon einmal darüber nachgedacht, welche Attribute in CSS es uns ermöglichen, Elemente zu verschieben?

Das ist richtig, verwenden Sie transform , das speziell zum Verschieben von Elementen in CSS verwendet wird. Unsere Logik besteht hier also darin, das Element alle 3 Sekunden um seine eigene Länge nach links zu verschieben, sodass wir zum Anfang des nächsten Bildes gelangen können.

Dadurch wird jedoch nur ein Bild verschoben. Wenn wir also ein zweites Mal verschieben müssen, um zum dritten Bild zu gelangen, müssen wir jedes Bild um 200 % versetzen und so weiter. Wir benötigen also einen Wert für die aktuelle Seitenzahl, genannt current , mit einem Standardwert von 0. Addieren Sie bei jeder Verschiebung 1, so dass der Offsetwert − 100 × Seitenzahl - 100\t-mal Seitenzahl − 100 × Seitenzahl beträgt. Auf diese Weise haben wir die mehrfache Bewegung der Bilder abgeschlossen und sie einzeln angezeigt.

Klasse Karussell erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen konstruktor() {
 super();
 diese.attribute = Objekt.erstellen(null);
 }
 setAttribute(name, wert) {
 this.attributes[name] = Wert;
 }
 rendern() {
 dies.root = Dokument.createElement('div');
 this.root.classList.add('Karussell');

 für (let Bild von this.attributes.src) {
 let child = document.createElement('div');
 child.style.backgroundImage = `url('${picture}')`;
 dies.root.appendChild(Kind);
 }

 lass Strom = 0;
 setzeIntervall(() => {
 lass Kinder = diese.Wurzel.Kinder;
 ++aktuell;
 für (lass Kind von Kindern) {
 untergeordneter Stil.Transform = ``translateX(-${100 * current}%)``;
 }
 }, 3000);

 gib dies.root zurück;
 }
 mountTo(übergeordnet) {
 übergeordnetes Element.anhängenKind(dieses.render());
 }
}

Wir haben hier ein Problem festgestellt. Das Karussell hält nicht an und verschiebt sich ständig nach links. Und wenn wir zum letzten Bild springen müssen, müssen wir zum vorherigen Bild zurückkehren.

Um dieses Problem zu lösen, können wir einen mathematischen Trick anwenden. Wenn wir möchten, dass eine Zahl immer wieder zwischen 1 und N schwankt, müssen wir sie nur modulo n machen . In unserem Element ist die Länge der untergeordneten Elemente 4, wenn also unser aktueller Wert 4 erreicht, ist der Rest von 4 ÷ 4 4\div4 4÷4 0. Jedes Mal, wenn wir den aktuellen Wert auf den Rest des aktuellen Werts geteilt durch die Länge der untergeordneten Elemente setzen, kann eine Endlosschleife entstehen.

Hier wird der Strom den Wert 4 nicht überschreiten und nach Erreichen von 4 auf 0 zurückkehren.

Wenn wir diese Logik zur Implementierung unseres Karussells verwenden, können unsere Bilder tatsächlich in einer Endlosschleife ablaufen, aber wenn wir sie ausführen und uns das genauer ansehen, stellen wir ein weiteres Problem fest. Nachdem wir das letzte Bild abgespielt haben, wechseln wir schnell zum ersten Bild und sehen einen schnellen Rückspuleffekt. Das ist in der Tat nicht so gut. Was wir wollen, ist, dass nach Erreichen des letzten Bildes das erste Bild direkt mit dem hinteren verbunden wird.

Dann versuchen wir gemeinsam, dieses Problem zu lösen. Nach der Beobachtung können wir immer nur zwei Bilder gleichzeitig auf dem Bildschirm sehen. Eigentlich müssen wir also nur diese beiden Bilder an die richtige Position verschieben.

Wir müssen also das aktuelle Bild finden, das wir sehen, und das nächste Bild, und dann jedes Mal, wenn wir zum nächsten Bild wechseln, das nächste Bild finden und das nächste Bild an die richtige Position verschieben.

Vielleicht sind Sie an dieser Stelle noch immer ein wenig verwirrt, aber das macht nichts. Lassen Sie uns die Logik klären.

Holen Sie sich den Index des aktuellen Bildes und den Index des nächsten Bildes

• Zunächst muss das Karussell mit dem ersten Bild beginnen, und dieses Bild muss das 0. in unserem Knoten sein
• Denn wenn wir ein Bild sehen, müssen wir das zweite Bild vorbereiten, also müssen wir den Standort des nächsten Bildes finden
• Gemäß dem, was wir oben gesagt haben, können wir mathematische Techniken verwenden, um die Position des nächsten Bildes zu ermitteln: Die Position des nächsten Bildes = (aktuelle Position + 1) ÷ die Anzahl der Bilder Die Position des nächsten Bildes = (aktuelle Position + 1)\div Die Anzahl der Bilder Die Position des nächsten Bildes = (aktuelle Position + 1) ÷ der Rest der Anzahl der Bilder. Gemäß dieser Formel wird das letzte Bild, wenn wir es erreichen, auf 0 zurückgesetzt und kehrt zur Position des ersten Bildes zurück.
  

Berechnen Sie die Entfernung, um die das Bild verschoben wird, und halten Sie ein Bild hinter dem aktuellen Bild bereit, das darauf wartet, verschoben zu werden

• Die Position des aktuell angezeigten Bildes ist definitiv korrekt, wir müssen sie also nicht berechnen
• Aber die Position des nächsten Bildes erfordert, dass wir es verschieben, also müssen wir hier den Abstand berechnen, um den dieses Bild verschoben werden muss
• Die Distanz, um die sich jedes Bild um ein Raster bewegt, entspricht seiner eigenen Länge plus der negativen Zahl der Bewegung nach links. Daher beträgt jede nach links bewegte Rasterbewegung -100 %.
• Der Index der Bilder reicht von 0 bis n. Wenn wir ihren Index als Anzahl der Bilder verwenden, die vom aktuellen Bild entfernt sind, können wir index * -100% verwenden, um jedes Bild an die Position des aktuellen Bildes zu verschieben.
• Was wir aber brauchen, ist, das Bild zuerst an die nächste Position des aktuellen Bildes zu verschieben, sodass die nächste Position die Bilddistanz von Index - 1 ist, d. h. die Distanz, die wir verschieben müssen, ist (index - 1) * -100%
• Damit das zweite Bild an Ort und Stelle bleibt, benötigen wir keine Animationseffekte. Daher müssen wir in diesem Prozess die Animationseffekte des Bildes deaktivieren. Dazu müssen wir den Übergang löschen.
  

Das zweite Bild ist an seinem Platz und Sie können den Karusselleffekt starten

• Da wir mindestens einen Frame Bildbewegungszeit benötigen, ist eine Verzögerung von 16 Millisekunden erforderlich, bevor der Karusselleffekt ausgeführt wird (da 16 Millisekunden genau der Zeit eines Frames im Browser entsprechen).
• Schalten Sie zunächst transition im Inline-Tag wieder ein, damit die Animation in unserem CSS wieder funktioniert, da der nächste Karusselleffekt einen Animationseffekt haben muss
• Der erste Schritt besteht darin, das aktuelle Bild einen Schritt nach rechts zu verschieben. Zuvor haben wir gesagt, dass Index * -100 % die Formel zum Verschieben eines beliebigen Bilds an der Indexposition zur aktuellen Position ist. Wenn wir eine weitere Position nach rechts verschieben möchten, können wir (index + 1) * -100% verwenden.
• Der zweite Schritt besteht darin, das nächste Bild an die aktuelle Anzeigeposition zu verschieben. Dies geschieht durch die direkte Verwendung von index * -100%.
• Zum Schluss müssen wir unseren Datensatz einmal aktualisieren, currentIndex = nextIndex , und fertig!

Als nächstes übersetzen wir die obige Logik in JavaScript:

Klasse Karussell erweitert Komponente {
 // Konstruktor // DOM-Knoten erstellen konstruktor() {
 super();
 diese.attribute = Objekt.erstellen(null);
 }
 setAttribute(name, wert) {
 this.attributes[name] = Wert;
 }
 rendern() {
 dies.root = Dokument.createElement('div');
 this.root.classList.add('Karussell');

 für (let Bild von this.attributes.src) {
 let child = document.createElement('div');
 child.style.backgroundImage = `url('${picture}')`;
 dies.root.appendChild(Kind);
 }

 // Index des aktuellen Bildes
 sei currentIndex = 0;
 setzeIntervall(() => {
 lass Kinder = diese.Wurzel.Kinder;
 // Index des nächsten Bildes
 let nextIndex = (currentIndex + 1) % children.length;

 // Der Knoten des aktuellen Bildes let current = children[currentIndex];
 // Der Knoten des nächsten Bildes let next = children[nextIndex]; 
	
 // Bildanimation deaktivieren next.style.transition = 'none'; 
 // Verschiebe das nächste Bild an die richtige Position next.style.transform = `translateX(${-100 * (nextIndex - 1)}%)`;
	
 // Führe den Karusselleffekt aus und verzögere einen Frame um 16 Millisekunden setTimeout(() => {
 // Animation in CSS aktivieren next.style.transition = ''; 
 // Verschieben Sie zuerst das aktuelle Bild von der aktuellen Position weg current.style.transform = `translateX(${-100 * (currentIndex + 1)}%)`;
 // Verschiebe das nächste Bild an die aktuell angezeigte Position next.style.transform = `translateX(${-100 * nextIndex}%)`;
		
 // Abschließend den Index der aktuellen Position aktualisieren
 aktuellerIndex = nächsterIndex;
 }, 16);
 }, 3000);

 gib dies.root zurück;
 }
 mountTo(übergeordnet) {
 übergeordnetes Element.anhängenKind(dieses.render());
 }
}

Wenn wir zuerst overflow: hidden entfernen, können wir die Bewegungsbahn aller Bilder deutlich erkennen:

Implementieren Sie ein Drag & Drop-Karussell

Generell gilt, dass unser Karussell-Bauteil neben der automatischen Karussell-Funktion auch per Drag & Drop mit der Maus gedreht werden kann. Lassen Sie uns also gemeinsam diese manuelle Karussellfunktion implementieren.

Da es einen gewissen Konflikt zwischen dem automatischen und dem manuellen Karussell gibt, müssen wir den Code des automatischen Karussells auskommentieren, den wir zuvor implementiert haben. Dann können wir die untergeordneten Elemente (untergeordnete Elemente) unter dieser Karussellkomponente, d. h. die Elemente aller Bilder, verwenden, um unsere manuelle Drag-Karussell-Funktion zu implementieren.

Bei der Drag-Funktion geht es hauptsächlich darum, dass unser Bild gezogen wird, daher müssen wir dem Bild Maus-Abhörereignisse hinzufügen. Wenn wir in Arbeitsschritten denken, können wir eine Logik entwickeln:

Dazu müssen wir unbedingt zuerst mit der Maus über das Bild fahren und dann auf das Bild klicken. Das erste Ereignis, das wir überwachen müssen, muss also mousedown Mausklickereignis sein. Nach dem Mausklick beginnen wir, die Maus zu bewegen und lassen unser Bild der Richtung unserer Mausbewegung folgen. Zu diesem Zeitpunkt müssen wir auf mousemove hören. Nachdem wir das Bild an die gewünschte Position gezogen haben, lassen wir die Maustaste los. Dies ist auch der Zeitpunkt, an dem wir berechnen müssen, ob das Bild gedreht werden kann. Dazu müssen wir auf mouseup warten, bei dem die Maus losgelassen wird.

this.root.addEventListener('mousedown', Ereignis => {
 Konsole.log('Maus gedrückt');
});

this.root.addEventListener('Mausbewegung', Ereignis => {
 console.log('Mausbewegung');
});

this.root.addEventListener('mouseup', Ereignis => {
 Konsole.log('Maus hoch');
});

Nach der Ausführung des obigen Codes sehen wir in der Konsole, dass wir kontinuierlich mousemove auslösen, wenn wir die Maus auf das Bild setzen und es bewegen. Der gewünschte Effekt ist jedoch mousemove nur dann ausgelöst wird, wenn wir die Maus gedrückt halten und bewegen. Das bloße Bewegen der Maus über das Bild sollte das Ereignis nicht auslösen.

Daher müssen wir die Ereignisse „Mousemove“ und „Mouseup“ in die Rückruffunktion des Ereignisses „Mousedown“ einfügen, damit wir die Bewegungs- und Freigabeaktionen beim Drücken der Maus korrekt überwachen können. Wir müssen auch berücksichtigen, dass wir, wenn wir die Maus nach oben bewegen, die beiden Abhörereignisse „mousemove“ und „mouseup“ stoppen müssen. Daher müssen wir eine Funktion verwenden, um sie separat zu speichern.

this.root.addEventListener('mousedown', Ereignis => {
 Konsole.log('Maus gedrückt');

 lass Bewegung = Ereignis => {
 console.log('Mausbewegung');
 };

 nachlassen = Ereignis => {
 this.root.removeEventListener('mousemove', bewegen);
 this.root.removeEventListener('mouseup', hoch);
 };

 this.root.addEventListener('mousemove', bewegen);
 this.root.addEventListener('mouseup', hoch);
});

Hier entfernen wir die Ereignisse mousemove und mouseup beim Mouseup. Dies ist der grundlegende Code, den wir normalerweise beim Ziehen verwenden.

Wir werden jedoch auf ein anderes Problem stoßen. Wenn wir nach dem Klicken, Ziehen und Loslassen der Maus die Maus erneut über das Bild bewegen, wird unser Mousemove-Ereignis immer noch ausgelöst.

Dies liegt daran, dass unsere Mausbewegung an root überwacht wird. Tatsächlich wird unser Mousedown bereits auf root überwacht, sodass es nicht notwendig ist, Mousemove und Mouseup auf root zu überwachen.

Wir können diese beiden Ereignisse also direkt im document abhören. In modernen Browsern hat die Verwendung document einen weiteren Vorteil. Wir können weiterhin Ereignisse abhören, selbst wenn wir unsere Maus aus dem Browserfenster heraus bewegen.

this.root.addEventListener('mousedown', Ereignis => {
 Konsole.log('Maus gedrückt');

 lass Bewegung = Ereignis => {
 console.log('Mausbewegung');
 };

 nachlassen = Ereignis => {
 document.removeEventListener('mousemove', verschieben);
 document.removeEventListener('mouseup', hoch);
 };

 document.addEventListener('mousemove', bewegen);
 document.addEventListener('mouseup', hoch);
});

Mit diesem vollständigen Überwachungsmechanismus können wir versuchen, die Bewegungsfunktion des Karussells in Mousemove zu implementieren. Lassen Sie uns die Logik dieser Funktion klären:

Dazu müssen wir zunächst die Position der Maus kennen. Hier können wir event Parameter in mousemove verwenden, um die Koordinaten der Maus zu erfassen. Tatsächlich gibt es bei event viele Mauskoordinaten, wie beispielsweise offsetX , offsetY usw. Dabei handelt es sich um Koordinaten, die auf der Grundlage unterschiedlicher Referenzsysteme ermittelt wurden. Hier empfehlen wir die Verwendung von clientX und clientY Diese Koordinaten sind relativ zum renderbaren Bereich des gesamten Browsers und werden von keinen Faktoren beeinflusst. Oft befinden sich unsere Komponenten im Container des Browsers und wenn wir durch die Seite scrollen, ändern sich einige Koordinatensysteme. Auf diese Weise können leicht einige unüberbrückbare Fehler auftreten, aber ClientX und ClientY haben dieses Problem nicht. Wenn wir wissen möchten, wie weit sich unser Bild in eine bestimmte Richtung bewegen soll, müssen wir die Startkoordinaten beim Mausklick kennen und diese dann mit den erhaltenen Werten für clientX und clientY vergleichen. Wir müssen also ein startX und startY aufzeichnen, ihre Standardwerte sind die entsprechenden aktuellen clientX und clientY. Die Distanz, die unsere Maus zurücklegt, sind also die Endpunktkoordinaten − Startpunktkoordinaten Endpunktkoordinaten − Startpunktkoordinaten Endpunktkoordinaten − Startpunktkoordinaten, in unserer Move-Callback-Funktion sind es clientX - startX und clientY - startY Unser Karussell unterstützt nur das Gleiten nach links und rechts, daher wird in unserem Szenario der Wert der Y-Achse nicht benötigt. Nachdem wir die Bewegungsdistanz berechnet haben, können wir dem entsprechenden gezogenen Element eine Transformation hinzufügen, damit das Bild verschoben wird. Als wir zuvor das automatische Karussell erstellt haben, haben wir dem Bildelement eine Übergangsanimation hinzugefügt. Wenn wir diese Animation beim Ziehen haben, tritt ein Verzögerungseffekt auf. Wenn wir dem Bild also eine Transformation hinzufügen, müssen wir auch deren Übergangsattribut deaktivieren.

this.root.addEventListener('mousedown', Ereignis => {
 lass Kinder = diese.Wurzel.Kinder;
 Lassen Sie startX = event.clientX;

 lass Bewegung = Ereignis => {
 lass x = event.clientX - startX;
 für (lass Kind von Kindern) {
 untergeordneter Stil.Übergang = "keine";
 untergeordneter Stil.Transform = ``translateX(${x}px)``;
 }
 };

 nachlassen = Ereignis => {
 document.removeEventListener('mousemove', verschieben);
 document.removeEventListener('mouseup', hoch);
 };

 document.addEventListener('mousemove', bewegen);
 document.addEventListener('mouseup', hoch);
});

Nun, hier haben wir zwei Probleme festgestellt:

Beim ersten Klicken und Ziehen ist die Startposition des Bildes richtig, beim erneuten Klicken ist die Position des Bildes jedoch falsch. Wenn wir das Bild nach dem Ziehen der Maustaste loslassen, bleibt es an der Position, an der das Ziehen endet. Wenn wir das Bild in einer normalen Karussellkomponente jedoch über eine bestimmte Position hinaus ziehen, wird es automatisch zum nächsten Bild gedreht.

Um diese beiden Probleme zu lösen, können wir folgendermaßen rechnen, da wir eine Karussellkomponente erstellen. Gemäß den allgemeinen Karussellkomponenten wird das Bild jetzt zum nächsten Bild gedreht, wenn wir es an eine Position ziehen, die größer als die Hälfte des Bildes ist. Wenn es weniger als die Hälfte der Position ist, wird es an die Position des aktuell gezogenen Bildes zurückgebracht.

Gemäß einer solchen Anforderung müssen wir eine position aufzeichnen, die das aktuelle Bild aufzeichnet (beginnend bei 0). Wenn jedes unserer Bilder 500 Pixel breit ist, dann ist der Strom des ersten Bildes 0, der Versatzabstand beträgt 0 * 500 = 0, das zweite Bild ist 1 * 500 Pixel, das dritte Bild ist 2 * 500 Pixel und so weiter. Nach dieser Regel beträgt die Offsetposition des N-ten Bildes n ∗ 500 n * 500 n∗500.

Wenn wir die Maus bewegen, müssen wir zunächst berechnen, wie weit sich das aktuelle Bild vom Startpunkt entfernt hat. Dies lässt sich mit N * 500 berechnen, wobei N position des aktuellen Bildes ist. Dann müssen wir auch berechnen, ob die vom aktuellen Bild zurückgelegte Distanz die Länge der Hälfte des Bildes beim Hochfahren der Maus überschreitet. Wenn sie überschritten wird, transformieren wir direkt zum Startpunkt des nächsten Bildes. Die Überschussbeurteilung kann hier genutzt werden, indem die von der aktuellen Maus zurückgelegte Distanz x durch長度jedes unserer Bilder geteilt wird (unsere Komponente steuert das Bild auf 500 Pixel, also teilen wir x durch 500), sodass wir eine Zahl zwischen 0 und 1 erhalten. Wenn diese Zahl gleich oder größer als 0,5 ist, bedeutet dies, dass das Bild die Hälfte seiner Länge erreicht hat und Sie direkt zum nächsten Bild wechseln können. Wenn sie kleiner als 0,5 ist, können Sie zur Startposition des aktuellen Bildes zurückkehren. Der oben berechnete Wert kann auch mit unserer position kombiniert werden. Wenn er größer oder gleich 0,5 ist, kann er auf 1 gerundet werden, andernfalls ist er 0. Die 1 bedeutet hier, dass wir position zu 1 hinzufügen können. Wenn sie 0 ist, ändert sich position nicht. Dadurch wird der aktuelle Wert direkt geändert und bei der Transformation wird automatisch entsprechend dem neuen aktuellen Wert berechnet und der Karusselleffekt erzielt. Denn x ist die Distanz, die nach links und rechts verschoben werden kann. Das heißt, wenn wir die Maus nach links bewegen, ist x eine negative Zahl und umgekehrt. Wenn wir die Maus nach links ziehen, bewegen wir uns vorwärts, und wenn wir sie nach rechts ziehen, bewegen wir uns rückwärts. Bei der Berechnung dieses超出值hier gilt also position = position - Math.round(x/500) . Wenn wir beispielsweise die Maus 400 Pixel nach links bewegen und der aktuelle Wert 0 ist, dann position = 0 - Math.round(400/500) = 0 - -1 = 0 + 1 = 1 , sodass unser aktueller Wert schließlich 1 wird. Gemäß der obigen Logik müssen wir alle untergeordneten Bilder im Karussell im Mouseup-Ereignis schleifen und einen neuen Transformationswert für sie festlegen.

this.root.addEventListener('mousedown', Ereignis => {
 lass Kinder = diese.Wurzel.Kinder;
 Lassen Sie startX = event.clientX;

 lass Bewegung = Ereignis => {
 lass x = event.clientX - startX;
 für (lass Kind von Kindern) {
 untergeordneter Stil.Übergang = "keine";
 child.style.transform = ``translateX(${x - current * 500}px)``;
 }
 };

 nachlassen = Ereignis => {
 lass x = event.clientX - startX;
 aktuell = aktuell – Math.round(x / 500);
 für (lass Kind von Kindern) {
 untergeordneter Stil.Übergang = '';
 untergeordneter Stil.Transform = ``translateX(${-current * 500}px)``;
 }
 document.removeEventListener('mousemove', verschieben);
 document.removeEventListener('mouseup', hoch);
 };

 document.addEventListener('mousemove', bewegen);
 document.addEventListener('mouseup', hoch);
});

Beachten Sie, dass wir hier 500 als Länge des Bildes verwenden. Das liegt daran, dass die Bildkomponente, die wir selbst geschrieben haben, eine feste Bildbreite von 500 Pixeln hat. Wenn wir eine allgemeine Karussellkomponente erstellen müssen, ist es am besten, die tatsächliche Breite des Elements zu ermitteln, Element.clientWith() . Auf diese Weise können sich unsere Komponenten mit den Benutzern verändern.

Nachdem wir dies getan haben, können wir unsere Bilder durch Ziehen drehen. Wenn wir jedoch zum letzten Bild ziehen, stellen wir fest, dass nach dem letzten Bild ein leerer Bereich ist und das erste Bild nicht mit dem letzten verbunden ist.

Dann werden wir diese Funktion verbessern. Dies ist eigentlich unserem automatischen Karussell sehr ähnlich. Als wir das automatische Karussell erstellten, wussten wir, dass wir bei jedem Karussellwechsel höchstens zwei Bilder sehen konnten. Die Wahrscheinlichkeit, drei Bilder zu sehen, war sehr gering, da die Breite unseres Karussells im Verhältnis zu unserer Seite sehr klein war. Dieses Problem würde nicht auftreten, wenn der Benutzer nicht genügend Platz hätte, um zum zweiten Bild zu ziehen. Auf diesen Faktor gehen wir hier jedoch nicht ein.

Wir sind sicher, dass wir bei jedem Ziehen nur zwei Bilder sehen, daher können wir das Drag-Karussell auch wie das automatische Karussell handhaben. Allerdings gibt es hier einen Unterschied: Beim automatischen Drehen der Bilder bewegen sich die Bilder nur in eine Richtung, entweder nach links oder nach rechts. Wir können es aber manuell nach links oder rechts ziehen, und das Bild kann in jede beliebige Richtung verschoben werden. Daher können wir den automatischen Karussellcode nicht direkt verwenden, um diese Funktion zu implementieren. Die Logik der Endlosschleife am Anfang und Ende des Karussells müssen wir selbst nacharbeiten.

position + Math.round(x/500) current nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht前一個元素[-1, 0, 1]下一個元素當前元素nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht -1圖片位置= 當前圖片位置+ 偏移abers -1 Wenn wir also auf eine berechnete Position stoßen, die eine negative Zahl ist, müssen wir sie in die Position des letzten Bildes in dieser Bildspalte umwandeln. Gemäß den Bilddaten in unserem Beispiel befindet sich das aktuelle Bild an Position 0, daher sollte das vorherige Bild unser Bild an Position 3 sein. Wie können wir also am Ende -1 in 3 und 4 in 0 verwandeln? Hier müssen wir einen kleinen mathematischen Trick anwenden. Wenn wir möchten, dass die Kopf- und Endwerte umgedreht werden, wenn sie einander überschreiten, müssen wir eine Formel verwenden, um余數von （當前指針+ 數組總長度）/ 數組總長度ermitteln. Der erhaltene Rest wird genau umgedreht.

Lassen Sie uns beweisen, dass diese Formel richtig ist. Wenn wir zunächst current = 0 feststellen, erhält das vorherige Bild an Position 0 den Zeiger -1. Zu diesem Zeitpunkt verwenden wir (− 1 + 4) / 4 = 3 / 4 (-1 + 4) / 4 = 3 / 4 (−1+4)/4=3/4. Hier ist der Rest von 3 geteilt durch 4 3, und 3 ist zufällig das letzte Bild in diesem Array.

Dann versuchen wir es. Wenn das aktuelle Bild das letzte Bild im Array ist, ist es in unserem Beispiel 3, 3 + 1 = 4. Zu diesem Zeitpunkt ist der Rest 0 , wenn wir (4 + 4) / 4 (4 + 4) / 4 (4 + 4) / 4 konvertieren. Offensichtlich ist die Zahl, die wir erhalten, die Position des ersten Bilds im Array.

Durch diese Formel können wir die Zeigerposition der vorherigen und nächsten Bilder im Array erhalten.

Wir haben die gesamte Logik ausgeklärt.

Move = Ereignis => {
 sei x = event.clientX - startx;

 Sei Current = Position - Math.Round (x / 500);

 für (let offset von [-1, 0, 1]) {
 lass pos = Strom + Offset;
 // Berechnen Sie den Index des Bildes
 pos = (pos + Kinder.Length) % Kinder.Length;
 console.log ('pos', pos);

 Kinder [pos] .style.transition = 'keine';
 Kinder [pos] .style.transform = `translatex ($ {-pos * 500 + offset * 500 + (x % 500)} px)`;
 }
};

Nachdem der Code über so viele Dinge gesprochen hat, bedeutet der Code nur ein paar Zeilen. Die Programmierer, die den Code schreiben, können also auch unergründlich sein.

Schließlich gibt es ein kleines Problem.

Dieses Problem wird durch unsere Math.round(x / 500) , da wir während der Transformation x % 500 hinzugefügt haben. Dieser Teil der Berechnung ist jedoch nicht in unserer aktuellen Wertberechnung enthalten. Daher fehlt dieser Teil des Versatzes, wenn die Maus gezogen wird.

Wir müssen nur Math.round(x / 500) auf (x - x % 500) / 500 um den gleichen Ganzzahl -Effekt zu erzielen, während die ursprünglichen positiven und negativen Werte von x beibehalten.

Hier gibt es tatsächlich einige Probleme, da wir die Logik im Mausup -Event noch nicht geändert haben. Schauen wir uns dann an, wie wir die Logik in up implementieren sollten.

Was wir hier ändern müssen, ist der Code der für die Schleife bei Kindern. Die Logik von UP ist im Grunde die gleiche wie die von Move, aber es gibt ein paar Dinge, die sich verändern müssen:

Zunächst können wir unser Übergangsverbot entfernen und in der Transformation nicht benötigt werden, da das Bild nicht benötigt wird, um die Position unserer Maus zu befolgen, die die Position unserer Maus befolgen ' ' + x % 500 pos = current + offset , ist eigentlich das Element, das wir nicht benötigen, und dieses Element, das überfliegt, stammt aus den beiden Elementen -1 und 1 in [-1, 0, 1], die wir zuvor verwendet haben. Deshalb müssen wir die unnötigen in der UP -Logik entfernen. Dies bedeutet, dass wir, wenn wir die Maus nach links bewegen, nur das Element von -1 benötigen. Andernfalls brauchen wir nur das Element von 1 und die Elemente auf der anderen Seite können entfernt werden. Zunächst gibt es keine Auftragsanforderung for of Schleife, sodass wir die beiden Zahlen -1 und 1 durch eine Formel ersetzen und nach unserer 0 einsetzen können. Aber wie finden wir welche Seite wir brauchen? In der Tat müssen wir die Richtung berechnen, in der sich das Bild bewegt. Wir müssen also die position = position - Math.round(x / 500) Math.round(x / 500) - x . Dieser Wert ist relativ zur Mitte des aktuellen Elements, egal ob es sich um die linke (negative Zahl) oder die rechte Anzahl handelt (positive Zahl - Math.sign(Math.round(x / 500) - x) . Tatsächlich gibt es einen kleinen Fehler.

Dies liegt an den Eigenschaften unserer Übereinstimmung ( + 250 * Match.sign(x) .

Endlich sieht unser Code so aus:

lass up = event => {
 sei x = event.clientX - startx;
 Position = Position - Math.Round (x / 500);

 für (let offset von [0, -math.sign (math.round (x / 500) - x + 250 * math.sign (x))]) {
 Sei POS = Position + Offset;
 // Berechnen Sie den Index des Bildes
 pos = (pos + Kinder.Length) % Kinder.Length;

 Kinder [pos] .style.transition = '';
 Kinder [pos] .style.transform = `Translatex ($ {-pos * 500 + offset * 500} px)`;
 }

 document.removeEventListener('mousemove', verschieben);
 document.removeEventListener ('mauseup', up);
};

Nachdem wir die UP -Funktion geändert haben, haben wir die manuelle Karussellkomponente wirklich abgeschlossen.

Dies ist das Ende dieses Artikels, wie Sie JSX verwenden, um die Karussellkomponente zu implementieren (Front-End-Komponenten).