Verwenden von jQuery zum Implementieren des Karusselleffekts
|
Was ich Ihnen heute zeige, ist die Verwendung von jQuery zur Implementierung eines einfachen Karussells. Das Implementierungsprinzip ist: 1. Legen Sie in einem Bereich die Breite und Höhe fest. Wenn der Bereich diesen Teil überschreitet, wird ein verstecktes 2. Stellen Sie die Bildgröße auf 300 ein und der Index beginnt bei 0 3. Wenn Sie auf die Schaltfläche rechts klicken, müssen Sie dem Index der angeklickten Schaltfläche 1 hinzufügen. Addieren Sie 1 zum Index multipliziert mit der Größe des Bildes + px 4. Wenn es gleitet, fügen Sie einen animierten Animationseffekt hinzu und es wird großartig 5. Der Effekt rechts ist der gleiche wie links.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Karussellbild</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
.uli{
Breite: 300px;
Höhe: 300px;
Anzeige: Flex;
Überlauf: versteckt;
}
.uli li>img{
Position: relativ;
links: 0px;
oben: 0px;
Höhe: 300px;
}
.uli li{
Breite: 300px;
Höhe: 300px;
Listenstil: keiner;
}
.a1{
Position: absolut;
oben: 100px;
links: 0;
Cursor: Zeiger;
Schriftgröße: 50px
}
.a2{
Position: absolut;
oben: 100px;
links: 260px;
Cursor: Zeiger;
Schriftgröße: 50px
}
</Stil>
</Kopf>
<Text>
<!-- Anzahl der Bilder und Getränke in ul li einstellen -->
<ul Klasse="uli">
<li><img src="./img/Bildnachweis: Theodore Roosevelt.png" alt=""></li>
<li><img src="./img/Big Honey Green Tea.png" alt=""></li>
<li><img src="./img/大龙井绿茶.png" alt=""></li>
</ul>
<!-- Die Spans in den beiden Divs steuern die Klickereignisse der Haftnotiz rechts und des Etiketts links -->
<div Klasse="pa1">
<span class="a1"><</span>
<span class="a2"> </span>
</div>
<Skripttyp="text/javascript">
// Schreiben Sie eine Eingabefunktion $(function(){
// Bildgröße festlegen var img = 300;
// Setze den Index auf 0
Var-Index = 0;
// Länge der Bilderanzahl festlegen var option = $('.uli>li img').length;
// Der linke Teil beginnt $('.a2').click(function(){
// Klicken Sie dann auf das Ereignis, um die Rückruffunktion left() auszuführen.
})
// Funktionsname, damit
Funktion links(){
// Der Indexwert von index ist 0. Wenn er kleiner als die Länge des Bildes ist, lass es ausführen ++ Option, um minus 1 auszuführen, sonst gibt es eine leere Seite if (index < option-1) {
Index++
}anders {
Index = 0
}
bewegen()
}
// Der linke Teil endet // Der rechte Teil beginnt $('.a1').click(function(){
// Klicken Sie dann auf das Ereignis, um die Rückruffunktion right() auszuführen.
})
Funktion rechts(){
// Der Indexwert von index ist 0. Wenn er größer als die Länge des Bildes ist, wird er ausgeführt--
wenn (Index > 0) {
Index--
}anders {
Index = Option-1
}
bewegen()
}
// In den Funktionen rechts und links gibt es Verschiebefunktionen. Dies bedeutet, dass die Anzahl der Bilder mit der Zeit über 500 hinausgeht, wenn Sie auf Ihren Index klicken. Funktion move(){
var a = -index * img + 'px'
$('.uli li>img').animate({'left':a},500)
}
})
</Skript>
</body>
</html>Dies ist der obige Code. Sie können ihn anhand eines kleinen Beispiels ausprobieren. Werfen wir einen Blick auf die Renderings. Das Video kann nicht abgespielt werden, es sind nur die Bilder zu sehen.
Dies ist die aktuelle Situation. 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 verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe
Artikel empfehlen
Befehlsliste des Baota Linux-Panels
Inhaltsverzeichnis Pagoda installieren Management...
Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen
Deaktivieren und Aktivieren von MySQL-Fremdschlüs...
DHTML-Objekte (gemeinsame Eigenschaften verschiedener HTML-Objekte)
!DOCTYPE Gibt die Document Type Definition (DTD) ...
Detaillierte Verwendung des Linux-Textsuchbefehls find
Der Befehl „Find“ wird hauptsächlich zum Suchen v...
Web realisiert den Code zum Öffnen des Fensters zum Hochladen von Dateien durch Klicken auf das Bild
Code kopieren Der Code lautet wie folgt: <Stil...
Der vollständige Code der im Uniapp-Applet enthaltenen Radardiagrammkomponente
Effektbild: Der Implementierungscode lautet wie f...
Lösung für SQL Server-Datenbankfehler 5123
Weil ich ein Datenbank-Tutorial habe, das auf SQL...
MySQL-Entwicklungsleistungsforschung: Optimierungsmethode zum Batch-Einfügen von Daten
1. Auf welche Probleme sind wir gestoßen? In Stan...
Erste Schritte mit der Konvertierung von Vue in React
Inhaltsverzeichnis Design Komponentenkommunikatio...
Lösung für das Problem mit sicheren Dateiprivilegien beim Exportieren von MySQL-Daten
FEHLER 1290 (HY000) : Der MySQL-Server wird mit d...
Der Unterschied und die Verwendung von distinct und row_number() over() in SQL
1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...
Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben
Das Anwendungsszenario ist: Die Iframe-Seite hat k...
Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue
Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...
Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode
Einmal haben wir über das Würfelspiel gesprochen....
Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip
Offizielle Version von MySQL v5.7.19 (32/64-Bit-I...