Ü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
Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System
1. Wechseln Sie in das Verzeichnis /etc/init.d: ...
Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage
Inhaltsverzeichnis Hintergrund Problembeschreibun...
So verwenden Sie Nginx, um einen RTMP-Liveserver auszuführen
Dieses Mal haben wir einen RTMP-Liveübertragungss...
Vue Grundlagen Listener Detaillierte Erklärung
Inhaltsverzeichnis Was ist ein Listener in Vue? V...
Detaillierte Erklärung der Gründe und Optimierungen für den großen Offset, der die Leistung bei MySQL-Abfragen beeinträchtigt
Vorwort Die MySQL-Abfrage verwendet den Select-Be...
Detaillierte Verwendung des Docker-Maven-Plugins
Inhaltsverzeichnis Docker-Maven-Plugin Schritte z...
So verwenden Sie CSS-Zähler, um geordnete Zahlenlisten zu verschönern
Beim Webdesign ist es sehr wichtig, eine organisi...
Detaillierte Erklärung von PID und Socket in MySQL
Inhaltsverzeichnis 1. Einführung in die PID-Datei...
VMware pro15-Installation macOS10.13 detailliertes Installationsdiagramm (Bild und Text)
Der Redakteur wollte vor Kurzem mit dem macOS-Sys...
Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04
Dieser Artikel installiert die Google-Eingabemeth...
JavaScript implementiert eine Eingabefeldkomponente
In diesem Artikelbeispiel wird der spezifische Co...
So beheben Sie den MySQL-Fehler 1033. Falsche Informationen in der Datei: „xxx.frm“
Problembeschreibung 1. Datenbank der Sammelstelle...
Docker- und Portainer-Konfigurationsmethoden unter Linux
1. Installieren und verwenden Sie Docer CE Dieser...
Node+Socket realisiert einfache Chatroom-Funktion
In diesem Artikel wird der spezifische Code von N...
Webentwickler sind besorgt über die Koexistenz von IE7 und IE8
Ich habe heute IE8 installiert. Als ich auf die M...