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
Kapselungsimplementierung des von nestjs an das Front-End zurückgegebenen Datenformats
Im Allgemeinen wird während des Entwicklungsproze...
Detaillierte Erklärung des Prozesses zum Erstellen eines Image-Servers mit nginx (der Unterschied zwischen Root und Alias)
Der Installationsprozess entfällt (ich habe es di...
SQL-Aggregation, Gruppierung und Sortierung
Inhaltsverzeichnis 1. Aggregierte Abfrage 1. COUN...
Eine kurze Diskussion zum Verständnis von TypeScript-Indexsignaturen
Inhaltsverzeichnis 1. Was ist eine Indexsignatur?...
So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen
Inhaltsverzeichnis Fazit zuerst Frage Lösung Verw...
Detaillierte Erläuterung der JavaScript-Implementierung der Hash-Tabelle
Inhaltsverzeichnis 1. Hash-Tabellenprinzip 2. Das...
Mehrere beliebte Website-Navigationsrichtungen in der Zukunft
<br />Dies ist nicht nur ein Zeitalter der I...
So vermeiden Sie Zeichenverfälschungen beim Importieren externer Dateien (js/vbs/css)
Auf der Seite werden externe Dateien wie JS, CSS u...
Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx
Vorwort Standardmäßig werden Nginx-Protokolle in ...
Implementierungsmethode und Beispielcode des Tomcat-Klassenladers
Tomcat definiert intern mehrere ClassLoader, soda...
Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen
Heutzutage beginnen immer mehr Front-End-Entwickle...
Detaillierte Erklärung des alternativen Implementierungscodes der vertikalen Zentrierung in CSS (unkonventionell)
Vorwort Wie wir alle wissen, ist „Wie zentriert m...
Vue implementiert horizontal abgeschrägtes Balkendiagramm
In diesem Artikel wird der spezifische Code von V...
Erläuterung synthetischer React-Ereignisse
Inhaltsverzeichnis Klicken Sie zunächst auf das E...
Tutorial zum Deaktivieren und Aktivieren von Triggern in MySQL [Empfohlen]
Bei der Verwendung von MySQL werden häufig Trigge...