Realisierung des Karusselleffekts basierend auf jQuery
|
In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des Karussell-Map-Effekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Schematische Darstellung des linken Schalters des Karussells
Das gelbe Kästchen stellt Folien dar, und die Folie stellt das übergeordnete Element aller Folien dar. Jedes graue Kästchen stellt eine Folie dar. <div id="Folien"> <div id="Folie"> <div></div> <div></div> <div></div> </div> </div> Für Schritt 1 müssen wir zunächst die Overflow-Eigenschaft in CSS verwenden, um die Box hinter firstDiv auszublenden. Wenn wir das nicht tun, wird offensichtlich das Bild dahinter angezeigt und wir erzielen nicht den gewünschten Effekt. Schritt 2 kann in die folgenden Schritte unterteilt werden: 1. Verschieben Sie die übergeordnete Folie aller Karussellbilder nach links Schematische Darstellung der Rechtsschaltung des Karussells
Die Ausführungsschritte von rightMove sind: 1. Löschen Sie den letzten Sohn Implementierungscode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<meta http-equiv="X-UA-kompatibel" content="ie=edge" />
<title>Dokument</title>
<Stil>
#Behälter {
Position: relativ;
Breite: 200px;
Höhe: 100px;
Hintergrund: #000;
Überlauf: versteckt;
Anzeige: Inline-Block;
}
#container .img {
Position: absolut;
Breite: erben;
Höhe: erben;
}
#container .img > div {
Position: absolut;
Breite: erben;
Höhe: erben;
Farbe: #fff;
}
#container .img > div:erstes-Kind {
links: 0;
}
#container .img > div:nth-child(2) {
links: 100 %;
}
#container .img > div:letztes-Kind {
links: 200 %;
}
#container .img > div img {
Breite: 200px;
Höhe: 100px;
}
</Stil>
</Kopf>
<Text>
<button id="vorherige"><</button>
<div id="Behälter">
<div Klasse="img">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
</div>
</div>
<button id="weiter">></button>
<script src="js/jquery.js"></script>
<Skript>
Funktion imgLeftMove() {
$(".img").animieren({
links:"-=200"
}, 1000, Funktion() {
// Lösche das erste Bild und füge es am Ende des Bildes hinzu $( $(".img > div")[0] ).remove().appendTo( $(".img") );
// Setzt die linke Seite des Divs auf 0
$( $(".img") ).css("links", "0px");
});
}
Funktion imgRightMove() {
// Letztes Bild löschen und zum Bildkopf hinzufügen $(".img > div").last().remove().prependTo( $(".img") );
// Setze das Div links auf -200px
$(".img").css("links", "-200px");
$(".img").animieren({
links: "0px"
}, 1000);
}
$("#prev").klick(imgLeftMove);
$("#next").klick(imgRightMove);
// setInterval(imgLeftMove, 3000);
</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:
|
<<: So erstellen Sie manuell ein neues Image mit Docker
>>: Grundlegende Befehle für MySQL-Datenbankoperationen
Artikel empfehlen
So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen
1. Öffnen Sie Port 2375 Bearbeiten Sie docker.ser...
Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks
Professionelles Webdesign ist komplex und zeitint...
So stellen Sie ein Linux-System automatisch mit PXE bereit
Inhaltsverzeichnis Hintergrund DHCP konfigurieren...
MySQL-Methode zum rekursiven Suchen nach allen untergeordneten Knoten eines Menüknotens
Hintergrund Im Projekt besteht die Anforderung, a...
Analyse des Sperrmechanismus der MySQL-Datenbank
Bei gleichzeitigen Zugriffen kann es zu nicht wie...
Eine detaillierte Erklärung der DIV+CSS-Benennungsregeln kann zur SEO-Optimierung beitragen
1. Benennungskonventionen für CSS-Dateien Vorschl...
Implementierung der MySQL-Datentypkonvertierung
1. Problem Es gibt eine Tabelle wie unten gezeigt...
Eine sehr detaillierte Erklärung der Linux C++ Multi-Thread-Synchronisierung
Inhaltsverzeichnis 1. Mutex 1. Initialisierung de...
Methode und Optimierungsprinzip für langsame MySQL-Abfragen
1. Zum Vergleich der Datumsgröße muss das an XML ...
Detaillierte Erklärung zum Anzeigen der Anzahl der MySQL-Server-Threads
In diesem Artikel wird anhand eines Beispiels bes...
JavaScript implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Lösung für das Problem, dass Docker-Container nicht gestoppt oder beendet werden können
Docker-Version 1.13.1 Problemprozess Ein MySQL-Co...
Vue implementiert Ankerpositionierungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung des Bereitstellungsprozesses des SEATA-Transaktionsdienstes Docker
1. Erstellen Sie eine Datenbankautorisierungserkl...
Lösen Sie das Problem beim Einstellen des Datums auf 0000-00-00 00:00:00 in MySQL 8.0.13
Ich habe gerade angefangen, Datenbankoperationen ...