JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Karussells zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Vollständiger Code:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>ES6-Karussellbild</title>
    <Skript></Skript>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        .Kasten {
            Breite: 500px;
            Höhe: 300px;
            Rand: 1px massives Silber;
            Überlauf: versteckt;
            Rand: automatisch;
            Rand oben: 50px;
            Position: relativ;
            oben: 0;
            links: 0;
        }
        .äußeres {
            Listenstil: keiner;
            Position: absolut;
            oben: 0;
            links: 0;
            Übergang: 0,3 s alles linear;
        }
        .img {
            Breite: 500px;
            Höhe: 300px;
            schweben: links;
        }
  .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 massives Silber;
   Deckkraft: 0,5;
   Cursor: Zeiger;
   Farbe: #fff;
   Hintergrund: schwarz;
  }
  .btns .links {
   links: 5px;
  }
  .btns .rechts {
   links: 100 %;
   Rand links: -32px;
  }
        .rechts > :erstes-Kind, .links > :erstes-Kind {
            Breite: 35px;
            Höhe: 35px;
        }
        .oOl {
            Breite: 163px;
            Position: absolut;
            rechts: 0;
            links: 0;
            Rand: automatisch;
            unten: 10px;
            Listenstil: keiner;
        }
        .oLi {
            Breite: 25px;
            Höhe: 25px;
            Hintergrund: weiß;
            Randradius: 50 %;
            schweben: links;
        }
        .Farbe {
            Hintergrund: schwarz;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <ul Klasse="äußere">
        <li Klasse="img" Stil="Hintergrundbild:URL(img/0.jpeg)"></li>
        <li Klasse="img" Stil="Hintergrundbild:URL(img/1.jpeg)"></li>
        <li Klasse="img" Stil="Hintergrundbild:URL(img/2.jpeg)"></li>
        <li Klasse="img" Stil="Hintergrundbild:URL(img/3.jpeg)"></li>
        <li Klasse="img" Stil="Hintergrundbild:URL(img/4.jpeg)"></li>
    </ul>
 <div Klasse="btns">
  <span class="left">&lt;</span>
  <span class="right">&gt;</span>
 </div>
</div>
</body>
<Skript>
    Klasse Chart{
        Konstruktor(Name, JSON) {
   //Den Boxnamen abrufen this.box = document.querySelector(name);
            dies.json = json;
            //Eigenschaften des Karussells abrufen this.outer = document.querySelector(name + ' .outer'); //Leerzeichen beachten this.left = document.querySelector(name + ' .left');
            dies.rechts = document.querySelector(name + ' .rechts');
            //This.timer = null initialisieren; //This.iNow = 0 automatisch abspielen;
            dies.init();
        }
        init() {
            const that = this; //Speichere ein this
            konsole.log(dies.json.a);
            wenn (this.json.a){
                konsole.log(1);
            }
            //Klonen Sie das erste und fügen Sie es am Ende ein. let uLi = that.outer.children[0].cloneNode(true);
            das.äußeres.anhängenKind(uLi);
            diese.äußere.Stilbreite = diese.äußere.Kinderlänge * diese.äußere.Kinder[0].OffsetWidth + 'px';
            //Klicken, um nach links und rechts zu schieben, wenn (that.json.slide) {
                das.links.stil.anzeige = "Block";
                das.richtige.Stil.Anzeige = "Block";
                dies.left.onclick = () => das.rightGo();
                dies.right.onclick = () => das.leftGo();
            }
            //Automatisch abspielen, wenn (that.json.move) {
                das.moveGo();
                //Maus bewegt sich rein und raus if (that.json.loop) {
                    that.box.onmousemove = () => clearInterval(that.timer);
                    that.box.onmouseout = () => that.moveGo();
                }
            }
            //Kleine Punkte anzeigen, wenn (that.json.nav) {
                let oOL = document.createElement('ol');
                oOL.Klassenname = "oOl";
                oOL.style.left = that.json.distanceLeft + 'px';
                das.box.appendChild(oOL);
                für (sei i = 0; i < that.outer.children.length - 1; i++) {
                    let oLi = document.createElement('li');
                    oLi.Klassenname = "oLi";
                    oLi.style.marginLeft = that.json.distance + 'px';
                    oOL.appendChild(oLi);
                }
                oOL.style.width = ((diese.äußere.Kinderlänge - 1) * document.querySelector('.oLi').offsetWidth) + (diese.json.Distance * diese.äußere.Kinderlänge) + 'px';
                das.gleich();
            }
        };
        rightGo() {
            dies.iNow++;
            wenn (diese.iNow >= diese.äußere.kinder.länge) {
                dies.iNow = 1;
                this.outer.style.transition = '0s alles linear';
                dieser.äußere.Stil.links = 0;
            }
            Dies.äußerer.Stil.links = -this.iNow * Dies.äußere.Kinder[0].OffsetWidth + 'px';
            this.outer.style.transition = '0,3 s alles linear';
            dies.ähnlich();
        };
        leftGo() {
            dies.iNow--;
            wenn (dies.iNow <= -1) {
                dies.iNow = dies.äußere.kinder.länge - 1;
                this.outer.style.transition = '0s alles linear';
                this.outer.style.left = -(this.outer.children.length - 1) * this.outer.children[0].offsetWidth + 'px';
                dies.iNow = dies.äußere.kinder.länge - 2;
            }
            Dies.äußerer.Stil.links = -this.iNow * Dies.äußere.Kinder[0].OffsetWidth + 'px';
            this.outer.style.transition = '0,3 s alles linear';
   dies.ähnlich();
        };
        bewegLos() {
            const das = dies;
            dieser.timer = setzeInterval(() => das.rightGo(), das.json.speed || 1500)
        };
        //Die Punkte entsprechen jedem Bild gleichermaßen() {
            li = document.querySelectorAll('.oLi');
            für (sei i = 0; i < li.Länge; i++) {
                li[i].classList.remove('Farbe');
                wenn (i == dies.iJetzt) {
                    li[i].classList.add('Farbe');
                } anders {
                    li[i].classList.remove('Farbe');
                }
                //Spezial: Das Letzte ist das Erste if (this.iNow == li.length) {
                    li[0].classList.add('Farbe');
                }
                //Kleiner Punkt Klickereignis if (this.json.event) {
                    li[i].onmouseover = () => {
                        für (sei i = 0; i < li.Länge; i++) {
                            li[i].classList.remove('Farbe');
                        }
                        li[i].classList.add('Farbe');
                        this.outer.style.left = -i * this.outer.children[0].offsetWidth + 'px';
                    }
                }
            }
        }
    }
    neues Diagramm('.box', {
        move: true, //Automatische Karussellgeschwindigkeit: 1500, //Karussellgeschwindigkeit loop: true, //Maus rein- und raus-Effekt slide: true, //Links- und rechts-Slide-Effekt nav: true, //Kleine Punkte anzeigen distance: 20, //Kleiner Punktabstand event: true //Kleines Punktereignis })
</Skript>
</html>

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:

Verständnis und Anwendung des Destrukturierungsoperators von JavaScript ES6
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Einkaufswagens (ES6 objektorientiert)
Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6
Unterschiede zwischen ES6-Vererbung und ES5-Vererbung in js
Detaillierte Erklärung, wie Node.js mit ES6-Modulen umgeht
Detaillierte Erläuterung der JS ES6-Codierungsstandards
JS beherrscht schnell die Verwendung von ES6-Klassen
Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen
Mehrere magische Verwendungen des JS ES6 Spread-Operators
Über Front-End JavaScript ES6 Details

<<: Warum ich Nginx als Backend-Server-Proxy empfehle (Gründeanalyse)

>>: Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel