Ich habe selbst drei Bilderkarussels geschrieben. Eine wird in einfachen nativen JS implementiert und hat keine Animationseffekte. Der andere wird in Kombination mit JQuery implementiert und wird ein- und ausgeschaltet. Jetzt möchte ich auf meinem Blog oder meiner persönlichen Website einen cooleren erstellen, und ich kann zu diesem Zeitpunkt meine eigenen Arbeiten anzeigen. Nach einer Weile Einkäufe in MOOC stellte ich fest, dass es einen Karussell-JQuery-Plug-in-Kurs gab, der etwas cool war, also dachte ich darüber nach, ihn in nativen JS zu verkapsend. Erst nachdem es dies getan hatte, war es nicht so einfach, wie ich dachte. . . Lassen Sie uns nicht mehr darüber sprechen, erläutern wir den Implementierungsprozess.
2. Effekt
Weil mein Server noch nicht installiert wurde. Es gibt keine Online -Demonstration (ORZ ...), sodass ich nur ein Rendering einsetzen kann.
Der ungefähre Effekt ist immer noch auf den Bildern zu sehen, daher werde ich nicht viel sagen. Wenn Sie den echten Codeeffekt sehen möchten, begrüßen Sie in meinem GitHub -Download -Code. Vergessen Sie nicht, mir einen Stern in meinem Github -Projekt zu geben^_^
III. Implementierungsprozess
HTML -Struktur
<div data-seting = '{"width": 1000, "Höhe": 400, "Carouselwidth": 750, "CarouselHeight": 400, "Skala": 0,9, "Verticalalign": "Middle"}'> <div> </div> <ul> <li> <a href = "#"#"#"#"#"#"> <img <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <a <a href = "> <img <a href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </ul> </div> </div> </div> </div> </div>Diese Struktur entspricht der HTML -Codestruktur allgemeiner Karussell. Der geringfügige Unterschied besteht darin, dass es eine Dateneinstellungseigenschaft auf der Hauptkarousel-Div gibt, die einige Karussektivparameter enthält. Die spezifische Bedeutung der Parameter wird später erklärt.
Der Code für das CSS -Teil wird nicht veröffentlicht. Das Wichtigste ist, auf die absolute Positionierung der Elemente zu achten. Wie aus den Renderings ersichtlich ist, sind die Position und Größe jedes Bildes unterschiedlich, sodass diese über JS gesteuert werden, sodass eine absolute Positionierung erforderlich ist. Konzentrieren wir uns auf den Implementierungsprozess von JS.
JS -Implementierungsprozess
Sprechen wir über ein paar wichtige Schritte in JS. Nach diesen Schritten sollte es keine Schwierigkeiten geben.
①Default -Parameter
Da es sich um ein Paket-Plug-In handelt, gibt es definitiv einige Standardwerte für Parameter, die konfiguriert werden müssen. In diesem Plugin gelten die folgenden Parameter hauptsächlich:
Breite: 1000, // Breite des Folienbereichs
Höhe: 400, // die Höhe des Folienbereichs
Karussellwidth: 700, // Breite des ersten Rahmens der Folie
Karussellheight: 400, // die Höhe des ersten Rahmens der Folie
Skala: 0.9, // zeichnen Sie die Skalierungsbeziehung auf, beispielsweise wie viel Breite und Höhe des zweiten Bildes kleiner sind als das des ersten Bildes, wenn sie angezeigt werden.
Autoplay: Richtig, // wird es automatisch gespielt?
Timesspan: 3000, // Autospiel -Zeitintervall
Verticalalign: 'Middle' // Bildausrichtung, es gibt drei Möglichkeiten: ober/mitte/boden, Standard ist Mitte
②capsulate das Objekt
Da eine Website das gleiche Karussell-Plug-In an mehreren Stellen verwendet, ist die Verpackung von entscheidender Bedeutung. Nachdem Sie dieses Objekt definiert haben, können Sie mehrere Objekte erstellen, wenn Sie eine Initialisierungsmethode für das Objekt definieren. Sie müssen nur das gleiche Dom aller Klassen darin übergeben. Meine Initialisierungsmethode lautet also wie folgt:
Carousel.init = function (carousels) {var _this = this; // Nodelist in Array var cals = toArray (Carousels) konvertieren; <br> /*Weil native JS alle Klassen erhält, ist eine Nodelistin, die eine Klassenarray ist. Wenn Sie eine Array -Methode verwenden möchten, müssen Sie sie in ein echtes Array umwandeln. Hier ist There die Konvertierungsmethode. */ cals.foreach (Funktion (Element, Index, Array) {new _this (item);}); }Auf diese Weise nenne ich, wenn ich im Fenster bin. Auf diese Weise kann ich mehrere Karussells erstellen!
③Initialisieren Sie die Positionsparameter des ersten Rahmens
Da die relevanten Parameter aller Frames nach dem ersten Frame unter Bezugnahme auf den ersten Frame definiert sind, ist es wichtig, den ersten Frame gut zu definieren.
setValue: function () {this.carrousel.style.width = this.setings.width+'px'; this.carrousel.style.height = this.Settings.Height+'PX'; /*Links- und linke Tastendeinstellungen, hier, der Bereich nach der linken und rechten Schaltfläche von der Breite des ersten Rahmens. Z-Index ist höher als alle Bilder mit Ausnahme des ersten Rahmens, und die Bilder sind einfach links und rechts platziert, sodass der Wert von Z-Index die Hälfte der Anzahl der Bilder beträgt. */ var btnw = (this.settings.width-this.setings.carrouselwidth)/ 2; this.prebtn.style.width = btnw+'px'; this.preBtn.style.Height = this.setings.height+'px'; this.preBbtn.style.zindex = math.ceil (this.carrousLitems.length/2); this.NextBtn.style.width = btnw+'px'; this.NextBTN.Style.Height = this.setings.height+'px'; this.NextBTN.Style.zindex = Math.ceil (this.carrousLitems.length/2); // Die ersten Einstellungen mit dem ersten Rahmen this.Carrouselfir.style.left = btnw+'px'; this.carrouselfir.style.top = this.setCarrouselAnign (this.Setings.carrorouselHeight)+'px'; this.carrouselfir.style.width = this.Setings.Carrorouselwidth+'px'; this.carrouselfir.style.height = this.Setings.CarrouselHeight+'PX'; this.carrouselfir.style.zindex = math.floor (this.carrousLitems.length/2);},Wenn das neue Objekt verwendet wird, gehen Sie zum DOM-Knoten, um die Parameter für die Dateneinstellung zu erhalten, und aktualisieren Sie dann die Konfiguration der Standardparameter. Hier gibt es einen Platz zu beachten. Sie können die Standardparameter nicht direkt aktualisieren, indem Sie beim Abrufen der Parameter Werte zugewiesen, da beim Konfigurieren von Parametern die Parameter möglicherweise nicht einmal konfiguriert werden. Wenn der Wert direkt zugewiesen wird und der Benutzer zufällig konfiguriert ist, gehen die Parameter verloren. Hier habe ich eine Objekterweiterungsmethode geschrieben, die der $ .extend -Methode in JQuery ähnelt, um die Parameter zu aktualisieren. Ich werde die Details nicht auflisten, wenn Sie interessiert sind, können Sie sie herunterladen.
④ andere Bildorteinstellungen
Das Bild hier ist tatsächlich das Bild, außer dass das erste in zwei linke und rechte Bilder unterteilt ist, und die Bildposition links und die rechts ist anders, so dass es separat konfiguriert werden muss:
// Setzen Sie die Positionsbeziehung des Bildes auf der rechten var rightIndex = stufe; Z-Index auf der rechten Seite ist kleiner, und die Anzahl der Bilder kann allmählich verringert werden. Berechnungsmethode hier ist: Subtrahieren Sie die erste Rahmenbreite, teilen item.Style.top = carrouselself.setCarrouselAnign (rh)+'px';});
Die Einstellungsmethode links ist ähnlich und einfacher, sodass ich nicht auf Details eingehe.
⑤ Passen Sie die Positionsgröße aller Bilder während der Rotation an
Dieser Schritt ist sehr wichtig. Wenn Sie auf der rechten Schaltfläche auf die nächste Klicken klicken, ist die linke Drehung und das Klicken auf die vorherige Schaltfläche links ist die rechte Drehung. Zu diesem Zeitpunkt müssen wir nur alle Bilder als Ring betrachten, einmal klicken, die Position ändern und die Rotation ausfüllen. Wenn die linke Drehung gedreht wird, werden die Parameter des zweiten Bildes gleich dem ersten Bild, das dritte Bild entspricht dem zweiten Bild ... und das letzte Bild entspricht dem ersten Bild. Machen Sie beim richtigen Drehen den Parameter des ersten Bildes gleich dem zweiten Bild, den Parameter des zweiten Bildes gleich dem dritten Bild ... und dem Parameter des letzten Bildes gleich dem ersten Bild.
Lassen Sie uns hier über linke Rotation sprechen
if (dir == 'links') {toarrray (this.carrousLitems) .foreach (Funktion (Element, Index, Array) {var pre; if (index == 0) {// Beurteile, ob es sich um das erste pre = _this. zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture Bezieht sich auf das erste Bild, und wenn Sie auf diese Weise verändern, werden die relevanten Parameter des ersten Bildes vorübergehend gespeichert Item.Style.Left; function_this.rotateFlag = true;Die Rotation hier erscheint steif, wenn Sie einige Animationen nicht zu sehr verwenden. Aber native JS hat keine animierten Funktionen, hier habe ich selbst eine nachgeahmte Animationsfunktion geschrieben. Das Prinzip ist es, den ursprünglichen Stilwert des DOM zu erhalten und ihn mit dem neu bestandenen Wert zu vergleichen. Verwenden Sie einige Methoden, um eine Geschwindigkeit zu definieren. Meine Geschwindigkeit hier ist es, die Differenz von 18 zu teilen. Definieren Sie jedoch einen Timer und verweisen Sie auf das Zeitintervall im Jquery -Quellcode, um alle 13 Millisekunden auszuführen. Dann ist der Timer jedes Mal klar, wenn der ursprüngliche Stilwert dem eingehenden Wert hinzugefügt wird. Weitere Informationen finden Sie hier.
Okay, die wichtigsten Punkte sind fast gleich und es sollte einfach sein, wenn Sie diese Prozesse verstehen!
4. Zusammenfassung und Reflexion
Zusammenfassen:
Ich persönlich denke, dass dies ein relativ leicht verständliches Plugin ist. Es wäre recht einfach, es in Kombination mit JQuery zu tun. Wenn Sie jedoch aus dem Original schreiben, fühlen Sie sich immer noch etwas weniger reibungslos. Es sollte sein, dass benutzerdefinierte Animationen nicht so gut sind wie die von JQuery eingekapselten Animationen.
Da die Bilder auf beiden Seiten der linken und rechten Seite gleichermaßen aufgeteilt werden müssen, soll auch die hier verwendete Methode das erste Bild klonen, es dann zum Ende hinzufügen und eine ungerade Zahl bilden.
denken:
Wenn es einen Fehler gibt, bedeutet dies, dass ich ein Drehflag -Flag definiere, um festzustellen, ob es sich im Moment drehen kann, dh Sie daran hindern, mit dem schnellen Klick Schritt zu halten. Als ich drückte, stellte ich RotateFlag auf False ein und setze dann RotateFlag nach dem Ende der Animation auf True ein, aber es scheint, dass der Effekt nicht offensichtlich ist. Ich hoffe, die relevanten Meister können mir einige Ratschläge geben und jeder wird gemeinsam Fortschritte machen.
Das obige ist der gesamte Inhalt dieses Artikels. Weitere Inhalte finden Sie unter: Zusammenfassung der JavaScript -Bildkarousel -Effekte. Vielen Dank für Ihre Lektüre.