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
Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt
1. Fügen Sie package.json hinzu "Haupt"...
MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)
Da ich Sicherheitsprodukte testen musste, wollte ...
Beispiel für eine automatische Importmethode für allgemeine Vue3.0-Komponenten
1. Voraussetzungen Wir verwenden zum Importieren ...
Vue realisiert Bildwechseleffekt
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen
In letzter Zeit habe ich jeden Tag an meinen Absch...
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
Analyse der Situation, in der js die Unterstützung von CSS-Attributen (Werten) bestimmt und informiert
Wenn wir eine neue CSS-Funktion verwenden möchten...
Erläuterung der MySQL-Transaktionsauswahl für die Aktualisierung und Datenkonsistenzverarbeitung
Transaktionen in MySQL werden standardmäßig autom...
Codebeispiel für das Nutzungsszenario der Nginx-Domänenweiterleitung
Szenario 1: Aufgrund von Serverbeschränkungen ist...
Umfassende Analyse von Prototypen, Prototypobjekten und Prototypketten in js
Inhaltsverzeichnis Prototypen verstehen Prototypo...
Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems
Im Web gibt es zwei gängige Ladesymbole: eines is...
MySQL verwendet Aggregatfunktionen zum Abfragen einer einzelnen Tabelle
Aggregatfunktionen Wirkt auf einen Datensatz ein ...
Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine
Dieser Artikel stellt die Installation des Window...
WeChat-Applet implementiert Formularüberprüfung
Validierung des WeChat-Applets-Formulars. Zu Ihre...
So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen
Inhaltsverzeichnis Web-Entwicklung 1. Überblick ü...