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
![Ein wenig bekanntes JS-Problem: [] == ![] ist wahr, aber {} == !{} ist falsch](/upload/images/67cae75cc9a32.webp)
Artikel empfehlen
So legen Sie eine statische IP für den Ubuntu 18.04-Server fest
1. Hintergrund Netplan ist ein neues Befehlszeile...
CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung
Beim Erstellen einer Homepage, beispielsweise ein...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
Detaillierte Erläuterung der Konfigurationsmethode der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
1. Beschreibung Früher haben wir über die Install...
MySQL-Rekursionsproblem
MySQL selbst unterstützt keine rekursive Syntax, ...
Zusammenfassung gängiger Befehle zum Erstellen von ZooKeeper3.4-Middleware unter CentOS7
1. Herunterladen und entpacken 1. Einführung in Z...
Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS3
Als ich kürzlich das Intranet-Portal änderte, sti...
Detaillierte Erläuterung der Installations- und Bereitstellungspraktiken von Zabbix
Vorwort Zabbix ist eine der gängigsten Open-Sourc...
Fähigkeiten zur Erstellung von Webformularen
Tatsächlich haben die drei obigen Tabellen alle d...
Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading
Inhaltsverzeichnis Überblick Was ist Lazy Loading...
Spezifische Verwendung des Ausnahmefilters Exceptionfilter in nestjs
Wenn wir über den Ausnahmefilter von Nestjs sprec...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...
Lösen Sie das Problem, dass Navicat beim Importieren der SQL-Datenbankdatenstruktur den Fehler datetime(0) meldet.
Fehler tritt auf: Beim Exportieren der Datenbank ...
Verwenden Sie das Tool nginx.vim zur Syntaxhervorhebung und Formatierung der Konfigurationsdatei nginx.conf
Ich verwende tengine, das Installationsverzeichni...
Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?
Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...