JavaScript zur Implementierung eines einfachen Karusselldiagramms, umfassendste Codeanalyse (ES5)

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung eines einfachen Karusselleffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Vollständiger Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="UTF-8">
  <title>ES5-Karussellbild</title>
  <Stil>
   * {Polsterung: 0;Rand: 0;}
   #Wrapper {
    Position: relativ;
    Rand: 50px automatisch;
    Polsterung: 0;
    Breite: 1000px;
    Höhe: 300px;
   }
   #wrapper .inhalt {
    Position: relativ;
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: versteckt;
   }
   #wrapper>.inhalt>.imgs {
    Position: absolut;
    Rand: 0;
    Polsterung: 0;
    links: 0;
    oben: 0;
    Breite: 6000px;
    /*Lassen Sie genügend Platz für ein zusätzliches Bild! */
    Listenstil: keiner;
   }
   #wrapper>.inhalt>.imgs li {
    schweben: links;
    Rand: 0;
    Polsterung: 0;
    Breite: 1000px;
    Höhe: 300px;
   }
   #wrapper>.content>.imgs>li img {
    Breite: 100 %;
    Höhe: 100%;
   }
   #wrapper>.inhalt>.dots {
    Breite: 163px;
    Position: absolut;
    rechts: 0;
    links: 0;
    Rand: automatisch;
    unten: 10px;
    Listenstil: keiner;
   }
   #wrapper>.content>.dots li {
    schweben: links;
    Breite: 20px;
    Höhe: 20px;
    Textausrichtung: zentriert;
    Zeilenhöhe: 20px;
    Randradius: 50 %;
    Rand links: 10px;
    Cursor: Zeiger;
   }
   li.aktiv {
    Hintergrundfarbe: weiß;
   }
   li.ruhig {
    Hintergrundfarbe: #5a5a58;
   }
   .btns {
    Anzeige: keine;
   }
   .btns Spanne {
    Position: absolut;
    Breite: 25px;
    Höhe: 40px;
    oben: 50 %;
    Rand oben: -20px;
    Zeilenhöhe: 40px;
    Textausrichtung: zentriert;
    Schriftstärke: fett;
    Schriftfamilie: Simsun;
    Schriftgröße: 30px;
    Rand: 1px durchgezogen #fff;
    Deckkraft: 0,5;
    Cursor: Zeiger;
    Farbe: #fff;
    Hintergrund: schwarz;
   }
   .btns .links {
    links: 5px;
   }
   .btns .rechts {
    links: 100 %;
    Rand links: -32px;
   }
  </Stil>
 </Kopf>
 <Text>
  <div id="Wrapper">
   <div Klasse="Inhalt">
    <ul Klasse="imgs">
     <li><img src="img/s1.jpg" /></li>
     <li><img src="img/s2.jpg" /></li>
     <li><img src="img/s3.jpg" /></li>
     <li><img src="img/s4.jpg" /></li>
     <li><img src="img/s5.jpg" /></li>
    </ul>
    <ul Klasse = "Punkte"></ul>
   </div>
   <div Klasse="btns">
    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
   </div>
  </div>
 </body>
</html>
<Skript>
 var Wrapper = document.getElementById("Wrapper");
 var imgs = document.getElementsByClassName("imgs")[0];
 var Punkte = document.getElementsByClassName("Punkte")[0];
 var btns = document.getElementsByClassName("btns")[0];
 var Punkte = Punkte.Kinder;
 var len = imgs.children.length; //Anzahl der Bilder var width = wrapper.offsetWidth; //Breite jedes Bildes var rate = 15; //Umschaltgeschwindigkeit eines Bildes in px
 var times = 1; //Geschwindigkeit mehrfach umschalten var timer = null; //Timer initialisieren var imgSub = 0; //Derzeit angezeigtes Bild Index var dotSub = 0; //Derzeit angezeigtes Bild Punkt Index var temp;
 // Erstelle ein Dokumentfragment, das noch nicht in die DOM-Struktur eingefügt wurde const frag = document.createDocumentFragment()
 // Entsprechend der Anzahl der Bilder entsprechende Punkte zum Dokumentfragment hinzufügen for (let i = 0; i < len; i++) {
  const dot = document.createElement("li");
  dot.className = "ruhig";
  // Zuerst in das Dokumentfragment einfügen frag.appendChild(dot);
 }
 //Füge die Dots-Fragmente gleichmäßig in die DOM-Struktur ein dots.appendChild(frag)
 // Der erste Punkt wird hervorgehoben dots.children[0].className = "active";
 // Schiebefunktion function Roll(distance) { //Parameter distance: der Zielpunkt des Scrollens (muss ein Vielfaches der Bildbreite sein)
  clearInterval(imgs.timer); //Jedes Mal, wenn Sie diese Funktion ausführen, müssen Sie den vorherigen Timer löschen!
  //Richtung der Bildbewegung bestimmen var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
  //Stellen Sie den Timer so ein, dass die anonyme Funktion alle 10 Millisekunden aufgerufen wird. imgs.timer = setInterval(function() {
   //Die Scrollposition für jeden Aufruf (Geschwindigkeit ist px/10 ms)         
   imgs.style.left = imgs.offsetLeft + Geschwindigkeit + "px";
   //Der verbleibende Pixelwert vom Zielpunkt var leave = distance - imgs.offsetLeft;
   /*Verarbeitung bei Annäherung an den Zielpunkt, direktes Erreichen des Ziels beim Scrollen in dessen Nähe, um zu vermeiden, dass das Bild bei falsch eingestelltem Ratenwert nicht vollständig angezeigt werden kann*/
   wenn (Math.abs(verlassen) <= Math.abs(Geschwindigkeit)) {
    LöschenInterval(imgs.timer);
    imgs.style.left = Abstand + "px";
   }
  }, 10);
 }
 /*Klone das erste li bis zum Ende der Liste*/
 imgs.appendChild(imgs.children[0].cloneNode(true));
 Funktion autoRun() {
  imgSub++;
  PunktSub++;
  if (imgSub > len) { //Nach dem Scrollen der geklonten Elemente, imgs.style.left = 0; //Nach links zum echten ersten Element wechseln imgSub = 1; //Anzeige ab dem zweiten Element beginnen}
  // Rufe die Scroll-Funktion auf, der Parameter ist die Scroll-Distanz des Index Roll(-imgSub * width);
  //Wenn der Punktindex bis zum Ende gescrollt ist, setze den Index auf 0 zurück
  if (dotSub > len - 1) { //Beurteilen, ob der letzte Punkt erreicht wurde dotSub = 0;
  }
  // Schleife zum Ändern der Standardstile aller Punkte for (var i = 0; i < len; i++) {
   Punkte[i].className = "ruhig";
  }
  // Hervorhebungsstil zum aktuell gescrollten Punkt hinzufügen dotss[dotSub].className = "active";
 }
 //Erstellen Sie einen Timer zum Starten des automatischen Scrollens timer = setInterval(autoRun,2000);
 // Schleife um kleine Punkte hinzuzufügen Trigger-Ereignis für (var i = 0; i < len; i++) {
  Punkte[i].index = i;
  Punkte[i].onmouseover = Funktion() {
   für (var j = 0; j < len; j++) {
    Punkte[j].className = "ruhig";
   }
   this.className = "aktiv";
   temp = PunktSub;
   imgSub = dotSub = dieser.index;
   times = Math.abs(this.index - temp); //Abstand vom vorherigen Punkt rate = rate * times; //Umschaltrate entsprechend dem Abstand ändern Roll(-this.index * width);
   Rate = 15;
  }
 }
 // Ereignis hinzufügen: Wenn die Maus über den Wrapper bewegt wird, werden die linken und rechten Umschaltflächen angezeigt wrapper.onmouseover = function() {
  Intervall löschen(Timer);
  btns.style.display = "Block";
 }
 // Ereignis hinzufügen: Wenn die Maus aus dem Wrapper heraus bewegt wird, werden die linken und rechten Umschaltflächen ausgeblendet wrapper.onmouseout = function() {
  Timer = Intervall festlegen (autoRun, 2000);
  btns.style.display = "keine";
 }
 // Klicken Sie auf die vorherige Schaltfläche, um das Ereignis auszulösen btns.children[0].onclick = function() {
  Bildunterschrift--;
  PunktSub--;
  if (imgSub < 0) { //Nach dem Scrollen des ersten Elements imgs.style.left = -len * width + "px"; //Nach links zum ersten geklonten Element wechseln imgSub = dotSub = len - 1;
  }
  Roll(-imgSub * Breite);
  wenn (dotSub < 0) {
   dotSub = Länge - 1;
  }
  für (var i = 0; i < len; i++) {
   Punkte[i].className = "ruhig";
  }
  dotss[dotSub].className = "aktiv";
 }
 // Klicken Sie auf die Schaltfläche „Weiter“, um das Ereignis auszulösen btns.children[1].onclick = autoRun;
</Skript>

Bild:

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:

JS implementiert Karussell mit mehreren Tabs
Natives JavaScript, um den Karusselleffekt zu erzielen
js, um einen einfachen Karusselleffekt zu erzielen
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)
js, um den kompletten Code des Karussells zu implementieren
Beispielcode zur Implementierung eines Karussells mit nativem JS
js, um den Effekt der Unterstützung des Karussell-Bildbeispiels mit Schiebeschalter für Mobiltelefone zu erzielen
Einfacher Code zur Implementierung eines JS-Karusselldiagramms
js, um zu erreichen, klicken Sie auf die linke und rechte Schaltfläche, um Bilder abzuspielen
JavaScript-Implementierung eines Karussellbeispiels

<<: Beispiel einer datenbankübergreifenden Abfrage in MySQL

>>: Lösen Sie schnell das Problem verstümmelter Zeichen und springender Zeilen in aus MySQL exportierten SCV-Dateien