Schauen wir uns den Bootstrap -Bild -Karussell -Effekt an:
Der oben genannte Effekt, der von allen geteilt wird, aber dies ist die Homepage der Netase -Cloud -Musik.
Denken Sie daran, zuerst in der offiziellen Kontrollbibliothek von iOS7 zu erscheinen, und Android fügte diese Ansicht auch zu einer bestimmten Version hinzu. Das Design ist universell. Bootstrap3 unterstützt auch die Verwendung solcher Effekte im Web.
Als nächstes eine einfache Analyse:
1. Strukturanalyse
Ein Karussellbild enthält hauptsächlich drei Teile:
☑ Karussellbilder
☑ Theke für Karussellbilder
☑ Der Controller für Karussellbilder
Schritt 1: Entwerfen Sie den Behälter für Karussellbilder. Der Karussellstil wird im Bootstrap -Framework übernommen, und für diesen Container wird ein ID -Wert definiert, so dass das Datenattribut verwendet wird, um den Auslöser später zu deklarieren.
Kopieren Sie den Code wie folgt: <div id = "Slidershow"> </div>
Schritt 2: Entwerfen Sie einen Karussellbildschalter. Fügen Sie einen Carousel-Bildrechner in den Container-Div.Carousel mit dem Stil der Karussell-Indikatoren hinzu. Seine Hauptfunktion besteht darin, die Wiedergabebuchreihenfolge des aktuellen Bildes anzuzeigen (es gibt mehrere Bilder, und die folgenden Listen werden im Allgemeinen verwendet, um es zu erstellen:
<div id = "SlidersHow"> <!-Setzen Sie die Reihenfolge der Bildkarussels-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
Schritt 3: Entwerfen Sie den Carousel -Bildwiedergabebereich. Bei der gesamten Wirkung des Karussellbildes ist der Wiedergabebereich der kritischste Bereich, der hauptsächlich zum Platzieren von Bildern verwendet wird, die karoussen werden müssen. Dieser Bereich wird mit dem Karussell-inneren Stil kontrolliert und auch in den Karussellbehälter gelegt, und jedes Karussellbild wird durch den Elementbehälter gelegt:
<div id = "slidershow"> <!-Setzen Sie die Reihenfolge der Bildkarussel-> <ol> <li> 1 </li>… </ol> <!-Setzen Sie die Karussellbilder-> <div> <a href = "##"> <img src = "http://images3.ctrip.com/lk/201407/ll580x140x140x140x140x140x1401407/ll580x1401407/ll580x140x1401407/ll580x140140./LLL </div> <div> <a href = "##"> <img src = "http://images3.c-c-crip.com/dj/201408/zj/zj_580145.jpg" src = "http://images3.c-c-crip.com/dj/201408/zj/zj_580145.jpg" src = "http://images3.c-crip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
Schritt 4: Bildbeschreibung Karussell einstellen. Viele Carousel -Bildereffekte haben auch ihren eigenen Titel und Beschreibungsinhalt auf jedem Bild. Tatsächlich liefert Carousel im Bootstrap -Framework auch ähnliche Effekte. Fügen Sie einfach den entsprechenden Code am Ende des Bildes im Element hinzu.
<div id = "slidershow"> <!-Setzen Sie die Reihenfolge der Bildkarussel-> <ol> <li> 1 </li>… </ol> <!-Setzen Sie die Karussellbilder-> <div> <a href = "##"> <img Src = "http://images3.ctrip.com/lk/201407/ll580x140x140x140x1401407/ll580x140x1401407/ll580x1401407/ll580x140140./lLL <!-Bild entsprechender Titel und Beschreibung Inhalt-> <div> <h3> Bildtitel </h3> <p> Beschreibung Inhalt ... </p> </div> </div>… </div> </div>
Schritt 5: Entwerfen Sie den Carousel -Bildcontroller. Oft haben Karussellbilder auch einen Controller, der nach vorne und rückwärts spielt. In Carousel wird es durch Kombination von links und rechts mit Carousel-Kontrollstil erreicht. Wo links vorne nach vorne Wiedergabe nach vorne bedeutet, rückwärts zu Wiedergabe. Es wird auch in den Karussellbehälter platziert:
<div id = "SlidersHow"> <!-Setzen Sie die Reihenfolge der Bildkarusselle-> <ol>… </ol> <!-Setzen Sie die Karussellbilder-> <div>… </div> <!-Setzen Sie den Carousel-Bildcontroller-> <a href = ""
2. Implementierungsprozess
<div id = "carousel-example-generic" data-ride = "carousel"> <!-Indikatoren-> <ol> <li data-target = "#carousel-example-generic" data-klide-to = "0"> </li> <li data-target = "#carousel-exam-generic" data-Sslside "1" 1 "> </li> </li li li lilside" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="..."> <div> ... </div> </div> <div> <img src="..."> <div> ... </div> </div> ... </div> ... </div> <!-Steuerelemente-> <a href = "#Carousel-example-generic" rollen = "button" data-slide = "prev"> <span> </span> <span> vorher </span> </a> <a href = "#carousel-exple-generic" rolle
In drei Teile unterteilt
1. Indikator
Ein Teil ist der kleine Punkt unten ... ist der Indikator
Die OL -Klasse wird verwendet, um diesen Indikator zu erstellen
Jedes Data-Slide-to = "0" -attribut wird verwendet, um den Speicherort zu leiten, um den Standardaktivierungszustand zu definieren.
Artikel
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Es gibt keine Spannung, füllen Sie einfach den Titel und den Inhalt des Bildes aus
2. Links und links Controller
Der Code ist wie folgt
<a href = "#mycarousel" rollen = "button" data-Slide = "prev"> <span aria-hidden = "true"> </span> <span> vorher </span> </a> <a href = "#mycarousel" rolle
Betrieb in JavaScript
Initialisierung
$ ('. Carousel'). Carousel ({Intervall: 2000})Eine Schleife ausführen
.Carousel ('Zyklus')
Pause
.Carousel ('Pause')
Die Positionierung zu einem bestimmten Element beginnt mit 0
.Carousel (Nummer)
Der vorherige
.Carousel ('prev')
Nächste
.Carousel ('Next')
Weitere Inhalte über Bootstrap finden Sie auch in speziellen Themen: "Bootstrap Learning Tutorial".
Das obige ist eine detaillierte Einführung in das JavaScript -Bildkarousel. Ich hoffe, dieser Artikel wird für alle hilfreich sein, um JavaScript -Programme zu lernen.