Über die Implementierung des JavaScript-Karussells
|
Heute ist ein weiterer sehr praktischer Fall. Allein der Name klingt fortgeschritten und schwierig, oder? Heute werde ich einen Fall beschreiben, mit dem Sie die Essenz von Karussellbildern leicht lernen können! ! Es gelten immer noch die alten Regeln. Schauen wir uns die Auswirkungen der Umsetzung an! !
Der erste Schritt zum Erlernen der Erstellung eines Karussells besteht darin, die Bilder vorzubereiten und sie in li innerhalb von ul einzuschließen. Geben Sie li einen Float, damit sie in einer Zeile erscheinen. Achten Sie jedoch darauf, dass ul breit genug ist! ! Komm, der HTML- und CSS-Code lautet wie folgt (Dateiname: index.html)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<script src="animate.js"></script>
<script src="Diashow.js"></script>
<Stil>
Körper {
Hintergrundfarbe: rgb(151, 147, 147);
}
* {
Rand: 0;
Polsterung: 0;
}
div {
Überlauf: versteckt;
Position: relativ;
Breite: 500px;
Höhe: 500px;
Hintergrundfarbe: himmelblau;
Rand: 20px automatisch;
}
ul {
Listenstil: keiner;
}
.img {
Breite: 600 %;
Position: absolut;
links: 0;
}
li {
schweben: links;
}
img {
Breite: 500px;
Höhe: 500px;
}
.yuan>li {
Cursor: Zeiger;
Breite: 10px;
Höhe: 10px;
Hintergrundfarbe: rgb(190, 185, 185);
Randradius: 50 %;
Rand: 0,5px;
Rand: 1px durchgezogenes RGB (119, 114, 114);
}
.Yuan
Position: absolut;
unten: 10px;
links: 50%;
transformieren: übersetzenX(-50%);
}
.yuan .Farbe {
Hintergrundfarbe: rgb(228, 135, 135);
}
A {
Textdekoration: keine;
Farbe: Schwarz;
Hintergrundfarbe: rgb(112, 111, 111);
Anzeige: Inline-Block;
Breite: 30px;
Höhe: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 30px;
Position: absolut;
oben: 50 %;
transformieren: verschiebeY(-50%);
Anzeige: keine;
}
.links {
links: 0;
}
.Rechts {
rechts: 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<ul Klasse="img">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
</ul>
<a href="JavaScript:;" rel="externes Nofollow" rel="externes Nofollow" class="left"><</a>
<a href="JavaScript:;" rel="externes Nofollow" rel="externes Nofollow" Klasse="rechts">></a>
<ul Klasse="yuan"></ul>
</div>
</body>
</html>
Wenn Sie es auf diese Weise geschrieben haben, verfügen Sie über eine grundlegende Gliederung. Der nächste Schritt besteht darin, es zu bewegen. Überlegen Sie, was das Bild bewegen kann. Ist es der Animationseffekt, den wir gelernt haben? An all diesen Stellen muss eine Zeitlupenanimation verwendet werden, um den Effekt des Bildwechsels zu erzielen. Da es viele JS-Codes gibt, müssen Sie eine neue JS-Datei erstellen, um den Code einzukapseln! Nachfolgend sehen Sie den gekapselten JS-Code (Dateiname: slideshow.js).
window.addEventListener('laden', Funktion () {
var img = document.querySelector('.img');
var yuan = document.querySelector('.yuan');
var box = document.querySelector('.box');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var imgwidth = box.offsetWidth; //Breite der Box abrufen (die Breite des Bildes)
// Stoppe das automatische Scrollen von Bildern nachdem die Maus ausgelöst wurde box.addEventListener('mouseenter', function () {
links.Stil.Anzeige = "Block";
rechts.Stil.Anzeige = "Block";
Intervall löschen(Timer);
})
// Das Weglassen der Maus löst das automatische Scrollen des Bildes aus und löst es erneut aus box.addEventListener('mouseleave', function () {
linke.Stil.Anzeige = "keine";
rechts.Stil.Anzeige = "keine";
Timer = Intervall festlegen(Funktion () {
rechtsklick();
}, 2000)
})
// Füge die folgenden Punkte gemäß dem Bild hinzu for (var i = 0; i < img.children.length; i++) {
var li = document.createElement('li');
yuan.appendChild(li);
li.setAttribute('Datumsindex', i);
li.addEventListener('klicken', Funktion () {
für (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
dieser.Klassenname = "Farbe";
var index = this.getAttribute('Datumsindex');
var imgwidth = box.offsetWidth;
// animieren(Objekt,Ziel,Funktion(){})
animieren(Bild, -index * Bildbreite);
Nums = Index;
Farben = Index;
})
}
// Standardmäßig hat der erste Punkt die Farbe yuan.children[0].className = 'color';
Variablennummern = 0;
var Farben = 0;
// Kopiere das erste Bild ans Ende, um es für nahtloses Scrollen vorzubereiten. var li = img.children[0].cloneNode(true);
img.appendChild(li);
varflag = wahr;
//Button rechts, wechsel zum nächsten, die Punkte wechseln gemeinsamright.addEventListener('click', function () {
wenn (Flagge) {
Flagge = falsch;
wenn (Nums == Bild.Kinder.Länge - 1) {
Nums = 0;
img.style.left = 0;
}
Zahlen++;
animieren(Bild, -nums * Bildbreite, Funktion () {
Flagge = wahr;
});
Farben++;
wenn (Farben == yuan.Kinder.Länge) {
Farben = 0;
}
für (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[Farben].Klassenname = "Farbe";
}
})
// Die linke Taste wechselt zur nächsten und die Punkte ändern sich gemeinsamleft.addEventListener('click', function () {
wenn (Flagge) {
Flagge = falsch;
wenn (Zahlen == 0) {
Nums = Bild.Kinder.Länge - 1;
img.style.left = -nums * Bildbreite + 'px';
}
Zahlen--;
Farben--;
animieren(Bild, -nums * Bildbreite, Funktion () {
Flagge = wahr;
});
wenn (Farben < 0) {
Farben = yuan.kinder.länge – 1;
}
// wenn (Farben == 0) {
// Farben = yuan.Kinder.Länge;
// }
// Farben--;
für (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[Farben].Klassenname = "Farbe";
}
})
// Automatisches Scrollen, ohne dass die Maus über das Bild fährt var timer = setInterval(function () {
rechtsklick();
}, 2000)
})
Hier kommt der entscheidende Punkt. Wie können wir es ohne Animationseffekte bewegen? Ich habe eine JS-Datei separat gekapselt, damit ich beim Schreiben anderer Fälle in Zukunft direkt darauf verweisen kann. Der Code lautet wie folgt (Dateiname: animate.js)
Funktion animieren (Objekt, Ziel, Rückruf) { // bewegtes Objekt (das sich bewegt), bewegtes Ziel, Rückruffunktion // zuerst den vorherigen Timer löschen und nur den aktuellen Timer behalten, um ihn auszuführen clearInterval (Objekt.Timer);
obj.timer = setzeIntervall(Funktion () {
// Schreibe die Schrittlänge in den Timer var step = (target - obj.offsetLeft) / 10; // Formel für die Schrittlänge: (Zielposition - aktuelle Position) / 10
Schritt = Schritt > 0 ? Math.ceil(Schritt) : Math.floor(Schritt); //Ändere die Schrittlänge in eine Ganzzahl, verwende keine Dezimalstellen, runde positive Zahlen auf und negative Zahlen ab, wenn (obj.offsetLeft == Ziel) {
clearInterval(obj.timer) //Stoppt die Animation, stoppt also den Timer if (callback) {
callback(); //Schreibe die Callback-Funktion an das Ende des Timers}
}
//Die Schrittlänge ist ein Wert, der allmählich abnimmt, um den Effekt einer Verlangsamung von schnell nach langsam zu erzielen. obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
Grundsätzlich ist alles klar und verständlich mit Kommentaren beschrieben, so dass jeder Schritt für dich verständlich sein sollte.
Dies ist das Ende dieses Artikels über die Implementierung des JavaScript-Karussells. Weitere Informationen zur Implementierung des Karussells finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: 12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert
>>: Eine detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten
Artikel empfehlen
Details zur Vue-Vorlagenkompilierung
Inhaltsverzeichnis 1. analysieren 1.1 Regeln für ...
Zusammenfassung der Konfigurationsprobleme von Nginx-Standort und Proxy-Pass-Pfad
Inhaltsverzeichnis 1. Grundlegende Konfiguration ...
Ein Artikel zeigt Ihnen, wie Sie mit React ein Rezeptsystem implementieren
Inhaltsverzeichnis 1. Rezeptsammlung 1.1 Projekth...
Lösung für das Problem des achtstündigen Unterschieds bei der MySQL-Einfügezeit
Lösen Sie das Problem des achtstündigen Zeitunter...
Dieser Artikel hilft Ihnen, den Lebenszyklus in Vue zu verstehen
Inhaltsverzeichnis 1. vorErstellen & erstellt...
Umfassendes Verständnis der HTML-Grundstruktur
Einführung in HTML HyperText-Auszeichnungssprache...
Der gesamte Prozessdatensatz der rekursiven Komponentenkapselung von Vue3
Inhaltsverzeichnis Vorwort 1. Rekursive Komponent...
Schritte zum Einrichten einer HTTPS-Website basierend auf Nginx
Inhaltsverzeichnis Vorwort: Verschlüsselungsalgor...
So ändern Sie die inländische Quelle von Ubuntu 20.04 apt
UPD 2020.2.26 Derzeit ist Ubuntu 20.04 LTS noch n...
IE6-Verzerrungsproblem
Frage: <input type="hidden" name=&qu...
Schritte zum Erstellen eines CentOS-Containers über Docker
Inhaltsverzeichnis Vorwort Erstellen Sie ein Brüc...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
Detailliertes Installationstutorial von Docker unter CentOS
Docker ist in CE und EE unterteilt. Die CE-Versio...
JavaScript implementiert Produktdetails der E-Commerce-Plattform
In diesem Artikel wird ein allgemeines Beispiel f...
So ändern Sie die Zeitzone und die Uhrzeit im Ubuntu-System
Auf einem Linux-Computer gibt es zwei Zeitzonen: ...