jQuery implementiert einen einfachen Karusselleffekt
|
Hallo zusammen, heute werde ich die Implementierung des Karussells mit Ihnen teilen. Hier ist der Effekt des Karussells, den ich erstellt habe.
Zunächst sehen wir, dass es aus einem Hintergrundbild, einem Richtungssymbol und einem Indikator besteht. Wir haben festgestellt, dass das Hintergrundbild, die Richtungssymbole und die Indikatoren übereinander gestapelt sind, sodass wir beim Layout eine absolute Positionierung verwenden müssen. Wir möchten erreichen, dass beim Klicken auf das Richtungssymbol das Bild entsprechend wechselt, beim Klicken auf den Indikator das Bild entsprechend wechselt, beim Nichtklicken automatisch alle 5 Sekunden abgespielt wird und beim Nichtklicken das Richtungssymbol nicht erscheint. Strukturelles Layout: Verwenden Sie ein Div, um drei Divs zu umschließen, und die drei Divs darin zeigen jeweils den Hintergrundbildteil, den Richtungssymbolteil und den Anzeigeteil an.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<link rel="stylesheet" href="./css/lunbotu.css" >
</Kopf>
<Text>
<!--Der gesamte Diashow-Bereich-->
<div Klasse="Karussell">
<!--Bildhintergrund-->
<div Klasse="Inhalt">
<ul>
<li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
</ul>
</div>
<!--Symbole zum Verschieben nach links und rechts-->
<div Klasse="pos">
<a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
<a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
</div>
<!--Indikator-->
<div Klasse="Punkt">
<ul>
<li Klasse="aktiv"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</body>
</html>Stilcode: Sie können Ihre eigene Lieblingsfarbe und Ihren eigenen Stil entwerfen. Beachten Sie, dass bei der absoluten Positionierung der Grundsatz „Sohn ist gleich Vater“ zu beachten ist. Wenn Sie nur ein Bild auf der Benutzeroberfläche anzeigen möchten, können Sie „overflow: hidden“ verwenden, um den überzähligen Teil auszublenden. Nach der Positionierung können Sie Folgendes festlegen: top: 50 %; transform: translateY(-50 %); vertical center display: none;
/*Entfernen Sie den Stil, der mit dem Tag kommt*/
* {
Rand: 0;
Polsterung: 0;
}
ul {
Listenstil: keiner;
}
A {
Textdekoration: keine;
}
img {
Breite: 100 %;
}
/*Legen Sie das Layout des gesamten Karussells fest*/
.Karussell {
Position: relativ;
Rand: 40px automatisch;
Breite: 1000px;
Höhe: 460px;
Rand: 1px durchgezogen rgba(0, 0, 0, 0,1);
Box-Größe: Rahmenbox;
/*Den überzähligen Teil ausblenden*/
Überlauf: versteckt;
}
/*Legen Sie das Layout des Hintergrundbildes fest*/
.Inhalt {
Position: absolut;
Z-Index: 1;
}
/*Legen Sie das Layout der linken und rechten Symbole und Anzeigen fest*/
.pos,
.punkt {
Position: absolut;
Z-Index: 2;
Breite: 100 %;
}
/*Legen Sie die Symbole für die Bewegung nach links und rechts so fest, dass sie zuerst vertikal zentriert und nicht angezeigt werden*/
.pos {
oben: 50 %;
transformieren: verschiebeY(-50%);
Anzeige: keine;
}
/*Hintergrund der linken und rechten Symbole festlegen*/
.pos > ein {
Polsterung: 10px 0;
Rahmenradius: 15px;
Hintergrund: rgba(0, 0, 0, 0,5);
}
/*Position des Symbols für die linke Bewegung festlegen*/
.links {
schweben: links;
}
/*Position des rechten Bewegungssymbols festlegen*/
.Rechts {
schweben: rechts;
}
/*Position der Indikatoranzeige festlegen*/
.punkt {
unten: 30px;
Textausrichtung: zentriert;
}
/*Den Indikatorhintergrund festlegen*/
.punkt ul {
Anzeige: Inline-Block;
Polsterung: 2px;
Hintergrund: rgba(0, 0, 0, .2);
Rahmenradius: 15px;
}
/*Größe des Punkts festlegen*/
.punkt > ul > li {
schweben: links;
Rand: 5px;
Breite: 10px;
Höhe: 10px;
Randradius: 50 %;
Hintergrund: weiß;
Cursor: Zeiger;
}
/*Position des Indikators bei der Anzeige des aktuellen Bildes festlegen*/
.aktiv {
Hintergrund: rgba(255, 255, 255, .6) !wichtig;
}JavaScript-Code: Beachten Sie, dass die Bilder am Anfang ausgeblendet sein sollten und standardmäßig das erste Bild angezeigt wird. Andernfalls wird das zweite Bild angezeigt, egal auf welches Bild Sie zuerst klicken. Bei der Anzeige des nächsten Bildes sollten die Markierung des vorherigen Bildes und der Indikator gelöscht werden
$(Funktion () {
/*Speichere den Index des aktuellen Bildes*/
lass Index = 0;
lass btn = false;
/*Entfernen Sie die Aktualisierungsfunktion von Tag a*/
$('a[href=""]').prop('href', 'javascript:;');
/*Zuerst die Bilder ausblenden und standardmäßig das erste Bild anzeigen*/
$('.content>ul>li').hide();
$('.content>ul>li:eq(0)').anzeigen();
// Stellen Sie das Richtungspfeilsymbol so ein, dass es ein- und ausgeblendet wird $('.carousel').hover(function () {
$('.pos').stop().fadeIn()
}, Funktion () {
$('.pos').stop().fadeOut()
})
// Klickereignis an Symbol für die linke Richtung binden $('.left').on('click', function () {
btn = wahr;
sauber();
wenn (Index == 0) {
Index = 5;
} anders {
--Index;
}
zeigen();
})
// Klickereignis an Symbol nach rechts binden $('.right').on('click', function () {
btn = wahr;
sauber();
wenn (Index == 5) {
Index = 0;
} anders {
++Index;
}
zeigen();
})
//Anzeigefunktion des Indikators (Klickereignis an den Indikator binden)
$('.dot li').on('klicken', Funktion () {
btn = wahr;
lass jetzt = $(this).index()
wenn (jetzt != Index) {
sauber();
Index = jetzt;
zeigen();
}
})
//Automatische Abspielfunktion (Timer)
setzeIntervall(Funktion () {
wenn (!btn) {
sauber();
wenn (Index == 5) {
Index = 0;
} anders {
++Index;
}
zeigen();
} anders {
btn = falsch;
}
}, 5000)
//Lösche das vorherige Bild und den Indikator Funktion clean() {
$(`.content>ul>li:eq(${index})`).stop().fadeOut();
$(`.dot>ul>li:eq(${index})`).removeClass('aktiv');
}
//Neue Bilder und Indikatoren zur Indikatorfunktion show() hinzufügen {
konsole.log(index);
$(`.content>ul>li:eq(${index})`).stop().fadeIn();
Konsole.log($(`.content>ul>li:eq(${index})`))
$(`.dot>ul>li:eq(${index})`).addClass('aktiv');
}
})Ergebnis:
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:
|
<<: Detaillierte Installationshistorie von Ubuntu 20.04 LTS
>>: Detaillierte Erklärung langsamer MySQL-Abfragen
Artikel empfehlen
Fallstudie zur dynamischen Datenbindung von this.$set in Vue
Ich finde, dass die Erklärung von this.$set im In...
Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)
Gute Datenbankspezifikationen tragen dazu bei, di...
Wie gut kennen Sie sich mit reinen HTML-Tags aus?
Die folgenden HTML-Tags umfassen grundsätzlich all...
CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse
Installieren Sie ZLMediaKit auf centos6 Der Autor...
Was wir über absolute und relative CSS-Werte zu sagen haben
In der Einleitung steht: Absolute sagte: „Relativ...
Zusammenfassung der zwölf Methoden der Vue-Wertübertragung
Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...
Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele
Enctype: Gibt den Kodierungstyp an, der vom Browse...
Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt
Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...
Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache
In diesem Artikel wird hauptsächlich der Fall vor...
Lösung für MySQL-Replikationsfehler aufgrund voller Festplatte
Inhaltsverzeichnis Fallbeispiel Lösung des Proble...
Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix
Hintergrund Da die Anzahl der Anwendungssysteme w...
Der Inhalt des häufig verwendeten Eingabetextfelds wird automatisch vertikal zentriert und der Standardeingabeaufforderungstext ist leer, wenn darauf geklickt wird
Drei Funktionen: 1. Automatische vertikale Zentrie...
MySQL-Code zur Implementierung der Sequenzfunktion
MySQL implementiert Sequenzfunktion 1. Erstellen ...
So installieren Sie Docker mithilfe von Skripten unter Linux Centos
Was ist die Hauptfunktion von Docker? Derzeit gib...
Entdecken Sie die Wahrheit hinter dem Neuladevorgang in Nginx
Der heutige Artikel stellt hauptsächlich den Neul...