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
Installieren von Alibaba Cloud Server mit Docker und die Fallstricke bei der Installation in einer virtuellen Maschine (Zusammenfassung der Probleme)
Docker-Installation (Alibaba Cloud Server) Offizi...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
Div deckt den Blitz ab. Die transparente Flash-Methode ermöglicht die Platzierung der DIV-Ebene auf dem Blitz.
Es gibt zwei Typen: (verschiedene Browser) 1. Verf...
Detaillierte Erklärung und praktische Übungen zum Mysql-Tuning-Erklärtool (empfohlen)
MySQL-Tuning: Detaillierte Erläuterung und prakti...
Regenbogen-Button-Stil erstellt mit CSS3
Ergebnis: Implementierungscode: html <div Klas...
JS realisiert einfachen Bildkarusselleffekt
In diesem Artikel wird der spezifische JS-Code zu...
Lösung für das Problem, dass die Konfigurationsdatei my.cnf in MySQL aufgrund von Berechtigungsproblemen nicht gestartet werden kann
Dieser Artikel stellt hauptsächlich den relevante...
Lösen Sie das Problem, dass Navicat beim Importieren der SQL-Datenbankdatenstruktur den Fehler datetime(0) meldet.
Fehler tritt auf: Beim Exportieren der Datenbank ...
Installations-Tutorial für mysql8.0rpm auf centos7
Laden Sie zunächst das Diagramm herunter 1. Deins...
So importieren Sie chinesische Daten in Navicat für SQLite in CSV
In diesem Artikel erfahren Sie zu Ihrer Informati...
Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys
Vorwort Bei der Entwicklung eines Gateway-Projekt...
Detaillierte Schritte zur Installation von MySQL in Win
In diesem Artikel werden die detaillierten Schrit...
CSS und JS für eine romantische Meteorschauer-Animation
1. Rendern 2. Quellcode HTML < Textkörper >...
Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden
Ich habe kürzlich an einer Kommentarfunktion gear...
So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate
Einführung Das mysql-utilities-Toolset ist eine S...