Ü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
Der MySQL-Root-Benutzer kann nicht autorisiert werden und löst das Problem der Navicat-Remote-Autorisierungsaufforderung 1044
Schauen Sie sich zuerst die Lösung an #----------...
React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)
laden Anforderung erfolgreich Anforderung fehlges...
Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung auf das Erlernen der Front-End-Leistungsoptimierung.
Ich lerne derzeit etwas über Front-End-Leistungsop...
Mobile Web-Bildschirmanpassung (rem)
Vorwort Ich habe vor Kurzem meine bisherigen Noti...
So kaufen und installieren Sie Alibaba Cloud-Server
1. Kaufen Sie einen Server Im Beispiel handelt es...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
js implementiert Axios Limit-Anforderungswarteschlange
Inhaltsverzeichnis Der Hintergrund ist: Was wird ...
So erhalten Sie Datums-/Uhrzeitdaten in MySQL, gefolgt von .0
Der Datentyp von MySQL ist datetime. Die in der D...
Detaillierte Erklärung des CSS-Pseudoelements::marker
Dieser Artikel stellt ein interessantes Pseudoele...
JavaScript zum Erzielen eines Zeitlupenanimationseffekts
In diesem Artikel wird der spezifische Code für J...
Mysql 5.6 fügt eine Methode zum Ändern von Benutzername und Passwort hinzu
Melden Sie sich zuerst bei MySQL an Shell> MyS...
Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer
Das mit vue-cli erstellte Projektgerüst hat den A...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
Linux löst das Problem, dass Deepin den Google Chrome-Browser nicht als Root-Benutzer starten kann
Um das Problem zu lösen, dass Deepin den Google C...
Über 40 schöne Beispiele für Webformular-Designs
Webformulare sind der primäre Kommunikationskanal...