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
![Beispielanalyse langsamer MySQL-Abfragevorgänge [Aktivieren, Testen, Bestätigen usw.]](/upload/images/67cad8bac8146.webp)
Artikel empfehlen
js implementiert einen einfachen Rechner
Verwenden Sie natives JS, um einen einfachen Rech...
Schritte für Django zum Herstellen einer Verbindung zur lokalen MySQL-Datenbank (Pycharm)
Schritt 1: Ändern Sie DATABASES in setting.py # D...
Grundlegende Hinweise zu HTML (empfohlen)
1. Grundstruktur der Webseite: XML/HTML-CodeInhal...
Detaillierte Erklärung des SELINUX-Arbeitsprinzips
1. Einleitung Der Hauptvorteil, den SELinux für L...
8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden
reduce Methode ist eine Array-Iterationsmethode. ...
Grafisches Tutorial zur Installation der MySQL 8.0.12 Winx64-Dekomprimierungsversion
Die Installation der Dekomprimierungsversion von ...
Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7
Hier kommt CentOS7 zum Einsatz und die Kernel-Ver...
Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen
Im vorherigen Artikel haben wir die MySQL-Optimie...
Detaillierte Erklärung des Prinzips und der Verwendung von MySQL-Ansichten
Dieser Artikel veranschaulicht anhand von Beispie...
So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL
Vor einiger Zeit habe ich einen Blogbeitrag mit d...
Detaillierte Erklärung des JS-Browserspeichers
Inhaltsverzeichnis Einführung Plätzchen Was sind ...
MySQL Serie 3 Grundlagen
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...
Es gibt kein Problem mit dem Linux-Dateipfad beim Bereitstellen der Fenster- und Linux-Projekte
Ich habe schon lange keinen Blog mehr geschrieben...
Über 3 gängige Pakete der REM-Anpassung
Vorwort Ich habe bereits einen Artikel über REM-A...
So löschen Sie verstümmelte oder mit Sonderzeichen versehene Dateien in Linux
Aus Kodierungsgründen werden beim Hochladen oder ...