js, um einen Karusselleffekt zu erzeugen
|
Ich denke, das Karussell ist ein relativ wichtiger Punkt in der Front-End-Entwicklung, da es viele native JS-Wissenspunkte enthält. Im Folgenden wird der Lernprozess zum Erstellen eines Karussells beschrieben Schwierigkeit: 1. So lassen Sie die entsprechenden Kreise und Bilder unten automatisch dynamisch generieren Wirkung:
Code:
<!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>
<Stil>
* {
Polsterung: 0;
Rand: 0;
}
A {
Textdekoration: keine;
Farbe: weiß;
Zeilenhöhe: 50px;
Textausrichtung: zentriert;
}
li {
Listenstil: keiner;
}
.tb-promo {
Position: relativ;
Breite: 700px;
Höhe: 300px;
Rand: automatisch;
Überlauf: versteckt;
}
.tb-promo .imgg {
Position: absolut;
oben: 0;
links: 0;
Breite: 3000px;
}
.tb-promo .imgg li {
schweben: links;
}
.tb-promo .imgg li img {
Breite: 700px;
Höhe: 300px;
}
.tb-promo .prev {
Anzeige: keine;
Position: absolut;
oben: 125px;
links: 0;
Breite: 25px;
Höhe: 50px;
Hintergrundfarbe: rgba(0, 0, 0, 0,2);
Rahmen oben rechts – Radius: 25px;
Rahmen unten rechts – Radius: 25px;
Z-Index: 999;
}
.tb-promo .prev:hover {
Hintergrundfarbe: rgba(0, 0, 0, 0,5);
}
.tb-promo .nächste {
Anzeige: keine;
Position: absolut;
oben: 125px;
rechts: 0;
Breite: 25px;
Höhe: 50px;
Hintergrundfarbe: rgba(0, 0, 0, 0,2);
Rahmen oben links – Radius: 25px;
Rahmen unten links – Radius: 25px;
Z-Index: 999;
}
.tb-promo .next:hover {
Hintergrundfarbe: rgba(0, 0, 0, 0,5);
}
.tb-promo .promo-nav {
Position: absolut;
oben: 270px;
links: 50%;
Rand links: -40px;
Höhe: 25px;
}
.tb-promo .promo-nav li {
schweben: links;
Breite: 16px;
Höhe: 16px;
Hintergrundfarbe: weiß;
Rahmenradius: 8px;
Rand: 4px;
}
.tb-promo .promo-nav .one {
Hintergrundfarbe: Tomate;
}
</Stil>
</Kopf>
<Text>
<div Klasse="tb-promo">
<a href="javascript:;" Klasse="vorherige"><</a>
<a href="javascript:;" Klasse="weiter">></a>
<ul Klasse="imgg">
<li><img src="./61.jpeg" alt=""></li>
<li><img src="./62.jpeg" alt=""></li>
<li><img src="./63.jpeg" alt=""></li>
</ul>
<ol Klasse="Promo-Navigation">
</ol>
</div>
<Skript>
var prev = document.querySelector('.prev');
var weiter = document.querySelector('.weiter');
var tbpromo = document.querySelector('.tb-promo');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
//Animationsfunktion Funktion animate(obj, target) {
clearInterval(obj.timer); //Aufruf um Mehrfachklicks zu verhindern obj.timer = setInterval(function () {
var Schritt = (Ziel – Objekt.OffsetLeft) / 10;
Schritt = Schritt > 0 ? Math.ceil(Schritt) : Math.floor(Schritt); //Runde positive und negative Werte if (obj.offsetLeft == Ziel) {
Intervall löschen(Objekt.Timer);
} anders {
obj.style.left = obj.offsetLeft + Schritt + 'px';
}
}, 10)
}
//Dynamischen Navigationskreis generieren var tbpromWidth = tbpromo.offsetWidth;
für (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//Indexnummer über benutzerdefiniertes Attribut aufzeichnen li.setAttribute('index', i);
//Exklusive Idee zum Schreiben einer Kreisfarbänderung li.addEventListener('click', function () {
// Alle Kreisfarben löschen für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
dieser.Klassenname = "eins";
var index = this.getAttribute('index');
//Klicken Sie auf li und weisen Sie der Steuervariablen num = index die Indexnummer von li zu.
Kreis=Index;
animieren(ul, -index * tbpromBreite);
})
ol.children[0].className = "eins";
}
//Klonen Sie das erste Bild li und fügen Sie es für nahtloses Wechseln ans Ende ein. var frist = ul.children[0].cloneNode(true);
ul.appendChild(frist);
//Nächste und vorherige Seiten ausblenden und anzeigen tbpromo.addEventListener('mouseenter', function () {
vorheriger Stil.Anzeige = "Block";
nächster.style.display = "Block";
Intervall löschen(Timer);
timer=0; // lösche die Timervariable })
tbpromo.addEventListener('mouseleave', Funktion () {
vorheriger Stil.Anzeige = "keine";
nächster.style.display = "keine";
Timer = Intervall festlegen(Funktion () {
next.click(); //das Klickereignis manuell aufrufen}, 1500)
})
//nächste vorherige Animation var num = 0;
//Kontrollkreis var circle = 0;
//Drosselklappenvariable var flag=true;
//Nächste Seite next.addEventListener('click', function () {
//Der letzte Schritt besteht darin, ul zu beurteilen und left auf 0 zurückzusetzen.
wenn (num == (ul.children.length - 1)) {
ul.style.left = 0;
Zahl = 0;
}
Zahl++;
animieren(ul, -num * tbpromBreite);
Kreis++;
wenn (Kreis == 3) {
Kreis = 0;
}
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[Kreis].className = "eins";
})
//Vorherige Seite prev.addEventListener('click', function () {
wenn (num == 0) {
Anzahl = ul.children.length-1;
ul.style.left = -num*tbpromWidth+'px';
}
anders {
Nummer--;
animieren(ul, -num * tbpromBreite);
Kreis--;
wenn (Kreis <0) {
Kreis = 2;
}
für (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[Kreis].className = "eins";
}
})
//Automatische Wiedergabe var timer = setInterval (function () {
next.click(); //das Klickereignis manuell aufrufen}, 2000)
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Docker-Compose-Installation DB2-Datenbankbetrieb
>>: XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML
Artikel empfehlen
Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA
Schauen wir uns zunächst meine grundlegende Entwi...
Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10
Installation, Konfiguration, Start, Anmeldung und...
Mysql, einige komplexe SQL-Anweisungen (Abfragen und Löschen doppelter Zeilen)
1. Suchen Sie nach doppelten Zeilen Wählen Sie * ...
So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen
Wenn auf einer Seite mehrere Bilder eingefügt wer...
Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können
Wenn Ihr Computer ein Mac ist, ist die Verwendung...
Verwendung des Vuex-Namespace
Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...
Detaillierte Erklärung langsamer MySQL-Abfragen
Informationen zu MySQL-Vorgängen abfragen Status ...
So löschen Sie die Hintergrundfarbe des A-Tags, wenn in H5 darauf geklickt wird
1. Die blaue Farbe des Tags wird aufgehoben, wenn...
Einführung in die SSL- und WSS-Schritte für die Nginx-Konfiguration
Inhaltsverzeichnis Vorwort 1. Nginx-Installation ...
Bringen Sie Ihnen bei, wie Sie wartbaren JS-Code schreiben
Inhaltsverzeichnis Was ist wartbarer Code? Code-K...
Gespeicherte MySQL-Prozeduren und allgemeine Funktionscodeanalyse
Das Konzept der gespeicherten MySQL-Prozedur: Ein...
Lösung für Fehler 1290 beim Importieren von Dateidaten in MySQL
Fehlerszenario Verwenden Sie den MySQL-Befehl in ...
Details zum JavaScript-Prototyp und zur Prototypkette
Inhaltsverzeichnis 1. Prototyp (expliziter Protot...
VUE implementiert Token-Anmeldeüberprüfung
In diesem Artikelbeispiel wird der spezifische Co...
Vue.js implementiert ein einfaches Faltpanel
In diesem Artikelbeispiel wird der spezifische Co...