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
CSS erzielt den Effekt, die Bildlaufleiste auszublenden und den Inhalt zu scrollen (drei Möglichkeiten)
Wir begegnen dieser Situation häufig bei der Fron...
Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS
px (Pixel) Ich glaube, jeder ist mit dem Begriff ...
So installieren Sie die PHP7 Redis-Erweiterung auf CentOS7
Einführung Im vorherigen Artikel haben wir Redis ...
So passen Sie geplante AT- und Cron-Aufgaben in Linux an
Es gibt zwei Arten von geplanten Tasks im Linux-S...
Die Verwendung und Methoden von async und await in JavaScript
asynchrone Funktion und await-Schlüsselwort in JS...
Detaillierte Erklärung des Javascript Echarts Luftqualitätskarteneffekts
Wir müssen zunächst die Luftqualitätsdaten mit de...
Beispielanalyse zur Optimierung von MySQL-Unterabfragen und verschachtelten Abfragen
Sehen Sie sich die 100 höchsten Punktzahlen der S...
HTML-Implementierung eines einfachen Rechners mit detaillierten Ideen
Code kopieren Der Code lautet wie folgt: <!DOC...
Beispielcode für die Master-Slave-Trennung einer MySQL-Datenbank
einführen Durch das Einrichten einer Lese-/Schrei...
Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme
1. Tabellenanweisung erstellen: CREATE TABLE `Mit...
Detaillierte Erläuterung inkompatibler Änderungen an Rendering-Funktionen in Vue3
Inhaltsverzeichnis Änderungen an der Rendering-AP...
So legen Sie das Breitenattribut auf den Stil des Span-Tags fest
Wenn Sie das Breitenattribut direkt auf den Stil d...
Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.
Über die Baumdarstellung von Vue wird im Projekt ...
Verstehen Sie kurz die MySQL-Datenbankoptimierungsphase
Einführung Haben Sie schon einmal eine Situation ...
So erstellen Sie einen NFS-Dienst in Ubuntu 16.04
Einführung in NFS NFS (Network File System) ist e...