Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells
|
In diesem Artikel wird der spezifische Prozess des jQuery-Atmungskarussell-Produktionsprinzips zu Ihrer Information erläutert. Der spezifische Inhalt ist wie folgt Karussell: Karussell Hinweis: Wenn Sie den Code verwenden, müssen Sie das Bild ersetzen und die jQuery-Bibliothek einführen. Beispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
ul, ol {
Listenstil: keiner;
}
#Karussell {
Position: relativ;
Breite: 900px;
Höhe: 540px;
Rand: 1px durchgezogen #000;
Rand: 50px automatisch;
}
/*Der Schlüssel zum Layout des atmenden Karussells besteht darin, alle Bilder zusammenzufügen*/
#Karussell .imgs ul li {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
links: 0;
oben: 0;
Anzeige: keine;
}
#Karussell .imgs ul li:erstes-Kind {
Anzeige: Block;
}
.btns ein {
Position: absolut;
Breite: 30px;
Höhe: 60px;
oben: 50 %;
Rand oben: -30px;
Textdekoration: keine;
Hintergrundfarbe: rgba(0, 0, 0, .5);
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Farbe: #fff;
}
.btns a:erstes-Kind {
links: 10px;
}
.btns a:letztes-Kind {
rechts: 10px;
}
#Karussell .Kreise {
Position: absolut;
Breite: 200px;
Höhe: 20px;
links: 50%;
Rand links: -100px;
unten: 30px;
}
#Karussell .Kreise ol {
Breite: 210px;
}
#Karussell .Kreise ol li {
schweben: links;
Breite: 20px;
Höhe: 20px;
Rand rechts: 10px;
Hintergrundfarbe: blau;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
Rahmenradius: 20px;
}
#Karussell .Kreise ol li.cur {
Hintergrundfarbe: orange;
}
</Stil>
</Kopf>
<Text>
<div id="Karussell">
<div Klasse="imgs" id="imgs">
<ul>
<li><img src="images/aoyun/0.jpg" alt=""></li>
<li><img src="images/aoyun/1.jpg" alt=""></li>
<li><img src="images/aoyun/2.jpg" alt=""></li>
<li><img src="images/aoyun/3.jpg" alt=""></li>
<li><img src="images/aoyun/4.jpg" alt=""></li>
<li><img src="images/aoyun/5.jpg" alt=""></li>
<li><img src="images/aoyun/6.jpg" alt=""></li>
</ul>
</div>
<div Klasse="btns">
<a href="#" id="leftBtn"><</a>
<a href="#" id="rightBtn">></a>
</div>
<div Klasse="Kreise" id="Kreise">
<ol>
<li Klasse="aktuell">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<Skripttyp="text/javascript">
// Element abrufen var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $imgs = $("#imgs ul li");
var $circles = $("#circles ol li");
var $karussell = $("#karussell");
// Länge definieren
var Länge = $imgs.length;
// Semaphor definieren var idx = 0;
//Starten Sie den Zeitgeber. var timer = setInterval(change, 2000);
//Maustaste drücken, um Timer zu stoppen$carousel.mouseenter(function() {
// Den Timer löschen clearInterval(timer);
})
//Starte den Timer neu, wenn die Maus geht$carousel.mouseleave(function() {
//Tabelle zum Schließen festlegen clearInterval(timer);
// Timer neu zuweisen
Timer = Intervall festlegen (Änderung, 2000);
})
//Rechts-Taste-Ereignis $rightBtn.click(change);
Funktion ändern() {
// Anti-Rogueif ($imgs.is(":animated")) {
zurückkehren;
}
// Das aktuelle Bild verschwindet $imgs.eq(idx).fadeOut(600);
//Semaphor ändert idx++;
//Bestimmung der Grenzen if (idx > length - 1) {
idx = 0;
}
// Das nächste Bild wird eingeblendet $imgs.eq(idx).fadeIn(600);
// Der aktuelle Punkt muss cur hinzufügen
$circles.eq(idx).addClass("aktuell").siblings().removeClass("aktuell");
}
// Linkes Tastenereignis $leftBtn.click(function() {
// Anti-Rogueif (!$imgs.is(":animated")) {
// Das aktuelle Bild verschwindet $imgs.eq(idx).fadeOut(600);
// Semaphor ändert sich idx--;
//Grenzwertbestimmung if (idx < 0) {
idx = Länge - 1;
}
// Das nächste Bild wird eingeblendet $imgs.eq(idx).fadeIn(600);
// Der aktuelle Punkt plus cur
$circles.eq(idx).addClass("aktuell").siblings().removeClass("aktuell");
}
})
// Kleines Punktereignis $circles.mouseenter(function() {
// Das aktuelle Bild verschwindet $imgs.eq(idx).stop(true).fadeOut(600);
// Semaphor ändern idx = $(this).index();
// Das nächste Bild erscheint $imgs.eq(idx).stop(true).fadeIn(600);
// Der aktuelle Punkt plus cur
$(diese).addClass("aktuell").geschwister().removeClass("aktuell");
})
</Skript>
</body>
</html>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:
|
<<: Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker
>>: Tutorial zur HTML-Tabellenauszeichnung (48): CSS-modifizierte Tabelle
Artikel empfehlen
Beispiel für die Implementierung einer farbigen Fortschrittsbalkenanimation mit CSS3
Kurzes Tutorial Dies ist ein CSS3-Farbfortschritt...
4 praktische Tipps für die Webseitengestaltung
Verwandte Artikel: 9 praktische Tipps zum Erstelle...
So entschlüsseln Sie Linux-Versionsinformationen
Das Anzeigen und Interpretieren von Informationen...
So zeigen Sie Serverhardwareinformationen in Linux an
Hallo zusammen, heute ist Double 12, habt ihr sch...
Auszeichnungssprache - für
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.25
Das neueste Download- und Installationstutorial f...
Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker
1. Einleitung Ich werde hier nicht näher auf Apol...
Detailliertes Beispiel zur Verwendung der distinct-Methode in MySQL
Ein deutlicher Bedeutung: distinct wird verwendet...
Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails
Da HTML-E-Mail keine unabhängige HOST-Seite auf di...
Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI
Inhaltsverzeichnis Anforderungsbeschreibung Probl...
Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux
Die Verwendung eines SSH-Terminals (z. B. Putty, ...
Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an
Kurzbeschreibung Der Editor hat häufig Probleme m...
CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext
Um diesen Effekt zu erzielen, müssen Sie zunächst...
Detaillierte Schritte zur Installation von MySQL 8.0.27 in Linux 7.6-Binärdateien
Inhaltsverzeichnis 1. Umweltvorbereitung 1.1 Betr...
Das WeChat-Applet implementiert einen einfachen Rechner
Der einfache Rechner des WeChat-Applets dient Ihn...