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
Detaillierte Erklärung des Workbench-Beispiels in MySQL
MySQL Workbench – Modellierungs- und Designtool 1...
So importieren Sie txt in MySQL unter Linux
Vorwort Als ich gestern ein kleines Projekt schri...
JavaScript zur Implementierung der Schaltfläche „Zurück nach oben“
In diesem Artikel wird der spezifische Code für J...
Windows 2019 Aktivierungs-Tutorial (Office2019)
Vor ein paar Tagen habe ich erfahren, dass die of...
So geben Sie chinesische Zeichen im Linux-Kernel aus
Sie können problemlos Chinesisch eingeben und im ...
Vue implementiert Dialogkapselung
Inhaltsverzeichnis Vue2-Schreiben Schreiben der V...
Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code
Alle aufeinanderfolgenden Leerzeichen oder Leerze...
So konfigurieren Sie denselben Domänennamen für das Front- und Backend von Nginx
In diesem Artikel wird hauptsächlich die Methode ...
Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das den ausgewählten Beispielcode anzeigt
Wirkung: CSS: .s_Typ { Rand: keiner; Rahmenradius...
Detaillierte Erklärung der Semiotik in Html/CSS
Basierend auf Theorien wie Saussures Sprachphilos...
Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren
Einige allgemeine Anweisungen zum Anzeigen von Tr...
JS generiert eindeutige ID-Methoden: UUID und NanoID
Inhaltsverzeichnis 1. Warum NanoID UUID ersetzt 2...
Grafisches Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu 16.04 64-Bit
In diesem Artikel finden Sie ein grafisches Tutor...
js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts
In diesem Artikelbeispiel wird der spezifische Co...
Angular-Leistungsoptimierung: Komponenten von Drittanbietern und Lazy-Loading-Technologie
Inhaltsverzeichnis Überblick Umgebungsvorbereitun...