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
Detaillierte Erläuterung der Verwendung von Requisiten in den drei Hauptattributen von React
Inhaltsverzeichnis Klassenkomponente Funktionale ...
Beispiel für die Implementierung der Drittanbieter-Autorisierungsmethode von GitHub in Vue
Inhaltsverzeichnis Erstellen von OAuth-Apps Holen...
Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches
Heute bin ich beim Entwickeln auf eine Methode ge...
Lösung zum Vergessen des Root-Passworts für selbst erstelltes MySQL in Alibaba Cloud Linux CentOS 7.2
Verifizierungsumgebung: [root@~~/]# rpm -qa | gre...
Einführung in die Verwendung und den Unterschied zwischen „in“ und „exists“ in MySQL
Geben Sie zunächst einen Code ein für(int i=0;i&l...
Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems
Vorwort Um zum Originalcode kompatibel zu sein, b...
Grafische Erklärung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...
So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen
Inhaltsverzeichnis verwenden Installieren Wie wir...
Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen
Das Entwerfen der Navigation für eine Website ist...
Detaillierte Erklärung zu JavaScript Anti-Shake und Throttling
Inhaltsverzeichnis Entprellen Gaspedal Zusammenfa...
Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)
1. Übergeordnetes Div definiert Pseudoklassen: af...
Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue
Inhaltsverzeichnis 1. Was ist eine benutzerdefini...
Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?
【Problemanalyse】 Wir können den Befehl chown verw...
Tutorial zur Installation von MySQL 5.7.28 auf CentOS 6.2 (MySQL-Hinweise)
1. Umweltvorbereitung 1.MySQL-Installationspfad: ...