Ü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
Detaillierte Erläuterung von 30 SQL-Abfrageoptimierungstechniken für MySQL-Zehnmillionen großer Datenmengen
1. Um die Abfrage zu optimieren, sollten Sie voll...
Geplante vollständige MySQL-Datenbanksicherung
Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...
Einfache Methode zur Installation von MySQL unter Linux
Bei der Onlinesuche nach Methoden zur Installatio...
So installieren Sie Solr 8.6.2 in Docker und konfigurieren den chinesischen Wortsegmentierer
1. Umgebungsversion Docker-Version 19.03.12 cento...
Einfaches Tutorial zur Verwendung von Navicat für MySQL
empfehlen: Detailliertes Tutorial zur Registrieru...
So lösen Sie das Problem, dass bei der Installation von VMware-Tools unter VMware die Installationsdatei nicht angezeigt wird
VMware-Tools bieten hohen Komfort bei der Verwend...
JS+Canvas zeichnet ein Glücksrad
In diesem Artikel wird der spezifische Code der J...
Besprechen Sie die Anwendung von Mixin in Vue
Mixins bieten eine sehr flexible Möglichkeit, wie...
Anleitung zur Verwendung von env in vue cli
Inhaltsverzeichnis Vorwort Einführung-Offiziell B...
JavaScript, um die Idee des Schlangenspiels umzusetzen
Die Implementierungsidee des Javascript-Spiels Sn...
Was macht die MySQL-Datenbank?
MySQL ist ein relationales Datenbankverwaltungssy...
So finden Sie Websites mit SQL-Injection (unbedingt lesen)
Methode 1: Verwenden Sie die erweiterte Suche von...
So stellen Sie Kafka in Docker bereit
Inhaltsverzeichnis 1. Docker erstellen 2. Betrete...
Erfahren Sie mehr über die MySQL-Speicher-Engine
Inhaltsverzeichnis Vorwort 1. MySQL-Hauptspeicher...
5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden
Es gibt viele Datenbankverwaltungstools für MySQL...