jQuery-Plugin für ein nahtloses Karussell
|
Ein nahtloses Karussell ist ein sehr häufiger Effekt und sehr einfach, wenn man die Logik einmal verstanden hat. Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Nahtloses Karussell erstellen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Benutzerauswahl: keine;
}
#div {
Rand: 1px durchgehend hellgrau;
Breite: 600px;
Höhe: 300px;
Rand: 20px;
Überlauf: versteckt;
}
.Artikel {
Rand: 1px durchgehend hellgrau;
Breite: 96%;
Höhe: 50px;
Rand: 10px automatisch;
}
</Stil>
</Kopf>
<Text>
<div id="div">
<div Klasse="rollbox"></div>
</div>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion() {
für (var i = 0; i < 7; i++) {
var $item = $("<div class='item'>" + i+ "</div>");
$item.appendTo($("#div .rollbox"));
}
})
//Karussell-Aktion$(function() {
$("#div").roll(1);
})
$.prototype.roll = Funktion(Spanne) {
span = span == undefiniert? 20 : span; //Scrollrate var $that = $(this).find('.rollbox');
Var-Index = 0;
var t = setzeIntervall(Funktion() {
$that.css('margin-top', index + 'px');
Index--;
überprüfen();
}, Spanne)
//
$that.mouseenter(Funktion() {
Intervall löschen(t);
})
$that.mouseleave(Funktion() {
t = Intervall setzen(Funktion() {
$that.css('margin-top', index + 'px');
Index--;
überprüfen();
}, Spanne)
})
Funktion check(){
var zuerst = $that.children().first();
var top = parseInt(first.css('margin-top').replace('px',''));
var bottom = parseInt(first.css('margin-bottom').replace('px',''));
var Höhe = erste.Höhe();
bw = parseInt(first.css('border-width').replace('px',''));
var temp = Index+oben+Höhe+unten;
wenn(temp==top-2*bw){
var letztes = $das.Kinder().letztes();
letztes.nach(erstes);
$that.css('margin-top','0px');
Index = 0;
}
}
}
</Skript>Erklärung der Ideen
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:
|
>>: Analyse der MySQL-Methode zum Exportieren nach Excel
Artikel empfehlen
Implementierung der Docker-Bereitstellung von Tomcat- und Webanwendungen
1. Docker online herunterladen yum install -y epe...
Das Problem zweier Anfragen, wenn der src-Attributwert des img-Tags leer ist (Nicht-IE-Browser)
Wenn der img src-Wert leer ist, werden zwei Anfrag...
Detailliertes Tutorial zur Installation des Tomcat-Servers und zur Konfiguration von Umgebungsvariablen unter Win10 (Bild und Text)
Inhaltsverzeichnis Herunterladen und Installieren...
CSS3 erzielt verschiedene Randeffekte
Durchscheinender Rand Ergebnis: Implementierungsc...
Detaillierte Diskussion der Speicherprinzipien: Werden Variablen in JS im Heap oder Stack gespeichert?
Inhaltsverzeichnis 1. Der Elefant, der nicht in d...
Umgang mit Leerzeichen in CSS
1. Weltraumregeln Leerzeichen im HTML-Code werden...
So benachrichtigen Sie Benutzer per E-Mail über die Ergebnisse der Crontab-Ausführung
Symptom Ich habe eine Crontab-Aufgabe auf einem C...
Detailliertes Tutorial zum Erstellen eines Gitlab-Servers auf CentOS8.1
Über den Unterschied zwischen Gitlab und Github m...
Reines CSS-Dropdown-Menü
Ergebnisse erzielen Implementierungscode html <...
Vergleich verschiedener Möglichkeiten zur Messung der Leistung von JavaScript-Funktionen
Inhaltsverzeichnis Überblick Leistung.jetzt Konso...
MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen
Inhaltsverzeichnis Vorwort Einrichten der Protoko...
Konstruktions- und Nutzungsprozess des Vue3.0-Projekts
Inhaltsverzeichnis 1. Projektkonstruktion 2: Verz...
So erstellen Sie einen Elastic-Stack-Cluster mit mehreren Knoten auf RHEL8/CentOS8
Elastic Stack, allgemein bekannt als ELK Stack, i...
Grafisches Tutorial zur Installation und Konfiguration des MySQL Community Server 8.0.16 unter Windows
Ich habe in letzter Zeit viel MySQL-bezogene Synt...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17
In diesem Artikel wird die Installations- und Kon...