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"><</span>
<span class="right">></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:
|
<<: Warum ich Nginx als Backend-Server-Proxy empfehle (Gründeanalyse)
Artikel empfehlen
So fügen Sie eindeutige Indizes für Felder in MySQL hinzu und löschen sie
1. PRIMARY KEY hinzufügen (Primärschlüsselindex) ...
0,1 Sekunden wert! Eine kurze Diskussion über das Problem der Beschleunigung der Front-End-Webseiten
Ich erinnere mich, dass mir bei meinem Vorstellun...
docker run -v mountet Datenvolumes abnormal und der Containerstatus wird immer neu gestartet
Symptome: Nach dem Hinzufügen des Parameters -v z...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...
Beispiel zum Verlassen der Schleife in Array.forEach in js
Inhaltsverzeichnis forEach() Methode So springen ...
Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7
Vorwort Die Schlüsselwörter von MySQL und Oracle ...
MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045
MySQL-Passwort ist korrekt, aber keine lokale Anm...
Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation
Vorwort Die Verzögerung der MySQL Master-Slave-Re...
Diskussion zu den Themen Bildschaltflächenübermittlung und wiederholte Formularübermittlung
In vielen Fällen wird die Schaltfläche „Senden“ du...
Detaillierte Erläuterung der Routing-Konfiguration im Linux-System mit mehreren Netzwerkkarten
Routing-Konfigurationsbefehle unter Linux 1. Host...
So implementieren Sie das Builder-Muster in Javascript
Überblick Das Builder-Muster ist ein relativ einf...
Verhindern von SQL-Injection in Webprojekten
Inhaltsverzeichnis 1. Einführung in SQL-Injection...
2017 neueste Version der Windows-Installation MySQL-Tutorial
1. Laden Sie zunächst die neueste Version von MyS...
Welche Ähnlichkeiten gibt es zwischen der Entwicklung des Webdesigns und der westlichen Architektur?
Die Geschichte wiederholt sich immer überraschend...
Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue
Inhaltsverzeichnis Hintergrund 1. Dokumentbeschre...