Dieses Beispiel bietet eine umfassende Analyse der Verwendung von Karussell in Bootstrap für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Quellcode -Datei:
Carousel.scss
Carousel.js
Implementierungsprinzip:
Verstecken
Quellcodeanalyse:
1. HTML -Struktur: hauptsächlich in vier Teile unterteilt
1.1. Container: Das äußerste Div erfordert ein data-ride = "carousel", das als Rad-Wiedergabe-Plug-In angegeben wird, und bietet eine ID, um die Assoziation des Kreisindikators zu erleichtern.
1.2. Der Bildlistenteil ist mit einem äußeren Div eingewickelt, und dann wird jeder IMG mit einer DIV eingewickelt, und die Klasse wird vom Gegenstand verpackt.
1.3. Kreisanzeige: Verwenden Sie eine OL -Liste, um ihre Grafiklistenelemente anzuzeigen. Jedes Listenelement muss das Data-Slide-to = "Index" -attribut angeben, mit dem die Indexnummer des aktuellen Kreises markiert wird.
1.4. Links- und linke Steuertasten: Erkennen Sie die Funktion, sich nach links und rechts zu bewegen
2. CSS -Stil
2.1. Karussell: Es gibt nur eine relative Positionierungsmarke
2.2. Karussellinner: Drehen Sie den Bildlistenbereich, in dem jedes Element über ein Element verfügt, um ihn zu ändern
2.2.1. Aktiv, nächstes und vorher sind es sichtbar.
2.2.2. Karussell-Kapion: Dies bedeutet, dass jedes Element Titelinformationen haben sollte und die Standardposition angezeigt wird.
2.3. Carousel-Control: Legt den Stil der linken und rechten Schaltflächen fest, wodurch Informationen wie Gradient und Transparenz festgelegt werden. Es bietet zwei zusätzliche Stile: Icon-Prev und Icon-Next.
2.4. Karussell-Indikatoren: Der Kreis-Teilstil ist absolut positioniert. Jedes Li wird als Inline -Blockelement eingestellt. Verwenden Sie textindent: -999, um die Schriftart zu verbergen.
3. JS -Code
3.1. Die Hauptkernmethode ist Dia, die das Wechsel von Bildern erkennt
3.1.1. Wenn der Bildschalter zum ersten Mal durchgeführt wird, wird die Pause -Methode aufgerufen, um den Timer vorläufig einzustellen. Erst nachdem der Bildschalter abgeschlossen ist, wird die Zyklusmethode aufgerufen, um den Timer zu aktivieren.
3.1.2. Akzeptierte zwei Parameter: Typ und Weiter
3.1.2.1. Typ: bedeutet, Seiten nach oben oder unten zu ändern
3.1.2.2. Weiter: Diesmal wird es als aktives Element angezeigt. Wenn es nicht weitergegeben wird, müssen Sie die GetItemfordirection -Methode verwenden, um sie zu erhalten.
3.1.3. Erhalten Sie grundlegende Parameter wie $ active (derzeit aktives Element), $ nächsten (Artikel, das ein aktives Element sein muss), Iscycling (Timer -Handle für Timer -Karussell), Richtung (Richtung) und andere grundlegende Parameter
3.1.4, dann die Slide.bs.Carousel -Ereignis auslösen
3.1.5. Setzen Sie dann das Index -Indikatorenelement ein
3.1.6. Bilder wechseln. Wenn Sie die CSS -Animation unterstützen, verwenden Sie die Animation, um zu wechseln. Andernfalls fügen Sie CSS direkt zum Schalten hinzu.
3.1.7. Animationsschalter Prinzip:
3.1.7.1. PREV: Es ist ein Stil, der durch Scrollen des Bildes nach rechts kombiniert wird: Aktive rechts (aktives Element) vor rechts (nächstes Element). Zu diesem Zeitpunkt ist die Prävung selbst -100%das Bild in die links links
3.1.7.2. Weiter: Scrollen Sie das Bild nach links und als nächstes links (nächstes Element). Zu diesem Zeitpunkt ist das nächste Mal zu 100%das Bild nach rechts.
3.1.7.3. Aktiv rechts: Das Bild sollte rechts sein, also sollte es 100% der Bildbreite des Bildes bewegen.
3.1.7.4. Active Links: Das Bild ist links, dann sollte die Bildbreite -100% ausgeführt werden
3.1.7.5. Vergleichendes Bild:
3.1.8. Implementierungscode (ohne CSS3):
.Carousel-innere> .aktiv,. Top: 0; Breite: 100%;}. Karussellinner> .Next {links: 100%;}. Carousel-innere> .prev {links: -100%; .Active.Right {links: 100%;}Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.