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 Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Einführung in die Verwendung gängiger Dockerfile-Befehle

Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.19 (Win10)

Zusammenfassung der MySQL-Injection-Bypass-Filtertechniken

Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0

Artikel empfehlen

JavaScript-Dokumentobjektmodell DOM

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

So konfigurieren Sie SSH für die Anmeldung bei Linux mit Git Bash

Grafisches Tutorial zur Installation von mysql5.7.17.msi

Bringen Sie Ihnen bei, wie Sie eine Reaktion aus HTML implementieren

TCP-Socket-SYN-Warteschlange und Accept-Warteschlangen-Unterschiedsanalyse

Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular

So installieren Sie MongoDB 4.2 mit Yum auf CentOS8

Implementierung von Zehntausenden gleichzeitigen Verbindungen auf einer einzigen Maschine mit nginx+lua

MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen

Detaillierte Erklärung unsichtbarer Indizes in MySQL 8.0

Funktionen in TypeScript

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10