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
Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code
Möglicherweise ist Ihnen aufgefallen, dass auf die...
Lösen Sie das Problem des Zeilenumbruchs in der Scroll-Ansicht des WeChat-Applets
Als ich heute ein kleines Programm schrieb, benut...
So zeigen Sie kleine Symbole in der Browsertitelleiste einer HTML-Webseite an
Genau wie dieser Effekt ist auch die Methode sehr...
Die Vorteile von Div+CSS und Web-Standardseiten
Das Div-Element wird verwendet, um Struktur und Hi...
Erklärung und Beispielverwendung von 4 benutzerdefinierten Anweisungen in Vue
Vier praktische Vue-Custom-Anweisungen 1. V-Wider...
Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren
1. Installieren Sie Howdy: Howdy-Projektadresse s...
Eine kurze Erläuterung der MySQL-Benutzerberechtigungstabelle
MySQL erstellt bei der Installation automatisch e...
Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen
1. Sehen Sie sich die Feldtypen in der Tabelle an...
Detaillierte Erläuterung der Lösung, um den Inhalt im Container im Flex-Layout zu halten
Auf der mobilen Seite ist das Flex-Layout sehr nü...
Austausch von Ideen zur Verarbeitung von Millionen von Daten in einer einzigen MySQL-Tabelle
Inhaltsverzeichnis Projekthintergrund Verbesserun...
Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm
Wie wir alle wissen, haben die Webseiten, Websites...
Warum sollte die Anzahl der Zeilen in einer einzelnen MySQL-Tabelle 5 Millionen nicht überschreiten?
Lassen Sie uns heute ein interessantes Thema besp...
Zusammenfassung der grundlegenden Kenntnisse zur MySql-Datenbank
Inhaltsverzeichnis Grundlegende Datenbankvorgänge...
So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL
Inhaltsverzeichnis 1. Sicherung 1.1 Vollständig v...
Verwenden von jQuery zum Implementieren des Karusselleffekts
In diesem Artikel finden Sie den spezifischen Cod...