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
Wichtige Punkte des Layouts der Variante „Atmendes Karussell“: Alle Bilder werden übereinander gestapelt.
Die Fähigkeit von jQuery, Elemente auszuwählen, ist sehr gut, wir sind es jedoch gewohnt, die Elemente, die wir verwenden werden, im Voraus in Variablen zu speichern. Normalerweise verwenden wir IDs, um Elemente auszuwählen. Normalerweise verwenden wir $box.
Die Strategie, um Fehlfunktionen der linken und rechten Tasten zu verhindern: Wenn sich das Bild bewegt, wird keine Operation ausgeführt. Ist()
Dots Strategie gegen Betrüger: Auf neue Vorfälle sofort reagieren. stopp(wahr)

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">&lt;</a>
   <a href="#" id="rightBtn">&gt;</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:

Optische Python-Simulation von den Maxwell-Gleichungen bis zum Verständnis und Lernen des Wellengleichungs-Vektoralgorithmus
Vorläufiges Verständnis des Beugungsalgorithmus für das Lernen optischer Simulationen in Python
Optische Python-Simulation: Lichtinterferenzen verstehen und lernen
Zusammenfassung der grundlegenden Verwendung von Matrizen in Python numpy
Häufige Matrixoperationen in Python (Zusammenfassung)
Optische Simulation in Python, Verständnis des Jones-Matrix-Lernens

<<: Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker

>>: Tutorial zur HTML-Tabellenauszeichnung (48): CSS-modifizierte Tabelle

Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells

Tipps zum MySQL-Abfragecache

Einführung in Docker-Container

Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute

Zusammenfassung gängiger Befehle in Dockerfile

Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

JavaScript-OffsetParent-Fallstudie

Zusammenfassung des Wissens zu CSS-Injection

Canonical ermöglicht Linux-Desktop-Apps mit Flutter (empfohlen)

Über die Konvertierung von Textbereichstext in HTML, d. h. Wagenrücklauf und Zeilenumbruch

Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen

Artikel empfehlen

HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben

Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank

Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)

Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen

Wissen Sie, wie Sie mit Vue-Cropper Bilder in Vue zuschneiden?

Spezifische Verwendung von Lazy Loading und Preloading in js

Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.

MySQL lernen: Drei Paradigmen für Anfänger

Detaillierte Erklärung zum Importieren/Exportieren von MySQL-Daten im Docker-Container

Detaillierte Analyse von Absturzfällen bei MySQL-Instanzen

Aufbau einer Docker+K8S-Clusterumgebung und verteilte Anwendungsbereitstellung

Ubuntu Docker-Installation in VMware (Containererstellung)

Installations- und Verwendungsschritte für Docker Compose

Einführung in gängige XHTML-Tags

Zusammenfassung der MySQL-Ansichtsprinzipien und Anwendungsbeispiele