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
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)
Dieser Artikel zeichnet das Installations-Grafik-...
Verwenden von JS zum Implementieren eines einfachen Rechners
Verwenden Sie JS, um einen einfachen Rechner für ...
Umfassendes Verständnis der Überwachung von HTML-Formulareingaben
Heute habe ich einen Blogbeitrag über Eingabeerei...
Keepalived implementiert Nginx-Lastausgleich und Beispielcode für hohe Verfügbarkeit
Kapitel 1: Einführung in Keepalived Der Zweck des...
Lösung für das Problem, dass VMware Workstation Pro aufgrund eines Win10-Updates nicht geöffnet werden kann
Als ich heute Abend nach dem Abendessen meinen La...
Komprimierungs- und Optimierungsvorgänge für Docker-Images
Der Grund für die heutige Beliebtheit von Docker ...
Beispielcode zur Implementierung von Hintergrundtransparenz und undurchsichtigem Text mit CSS3
Kürzlich bin ich auf die Anforderung gestoßen, Te...
Schritte zur Installation von MySQL mit Docker unter Linux
Als Tester müssen Sie während des Lernprozesses h...
Detaillierte Anwendungsfälle von Vue3 Teleport
Offizielle Website https://cli.vuejs.org/en/guide...
Detaillierte Erklärung der Verwendung und Unterschiede zwischen Indizes und Ansichten in MySQL
Vorwort Dieser Artikel stellt hauptsächlich die V...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
So installieren Sie Docker und konfigurieren Alibaba Cloud Image Accelerator
Docker-Installation Über die Installation auf ein...
Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann
Verwenden Sie den folgenden Befehl, um einen Cont...
So erstellen Sie mit Docker ein Basisimage der Python-Laufzeitumgebung
1. Vorbereitung 1.1 Laden Sie das Python-Installa...
Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen
Wenn ein Webprojekt immer größer wird, werden sei...