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
Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack
Inhaltsverzeichnis Konfigurieren Sie zuerst packa...
Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung
1. Problemsymptome Version: MySQL 5.6, unter Verw...
Detailliertes Tutorial zum Erstellen eines ETCD-Clusters für Docker-Mikroservices
Inhaltsverzeichnis Funktionen von etcd Es gibt dr...
Sollte ich für das mobile Web-WAP Bootstrap oder jQuery Mobile verwenden?
Lösung des Problems Bootstrap ist ein CSS-Framewo...
Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript
Da die von nativen JS initiierten Netzwerkanforde...
So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
Standort / { Index Index.jsp; Proxy_next_upstream...
Verwenden Sie Meta-Tag-Code, um den 360 Dual-Core-Browser standardmäßig auf den Hochgeschwindigkeitsmodus statt auf den Kompatibilitätsmodus einzustellen
Eine Website verwendet viel HTML5 und CSS3 und ho...
Delegieren von Berechtigungen in Linux mit Sudo
Einführung in die Sudo-Autoritätsdelegierung su-S...
Ubuntu MySQL-Anmeldenamen und -Passwort anzeigen und ändern, phpmyadmin installieren
Nach der Installation von MySQL geben Sie mysql -...
HTML-Hintergrundbild und Hintergrundfarbe_PowerNode Java Academy
1. HTML-Bild <img> 1. Das <img>-Tag u...
Was Sie über das Erstellen von MySQL-Indizes wissen müssen
Inhaltsverzeichnis Vorwort: 1. Indexmethode erste...
Master-Slave-Konfiguration für die synchrone Replikation einer MySQL-Datenbank unter Linux
Der Vorteil der Master-Slave-Synchronisierungskon...
Detaillierte Analyse dieser Richtung in JavaScript und wie die Richtung geändert werden kann
Inhaltsverzeichnis Das Verfahren Im Objekt Verste...
Was Sie über Filter in Vue wissen müssen
Inhaltsverzeichnis Vorwort Was ist ein Filter So ...
Lösen Sie das Problem der unsicheren Docker x509-Registrierung
Nach der Installation von Docker trat beim Versuc...