Dieser Artikel lernt hauptsächlich das JavaScript -Plug -In -Karussell. Ohne weiteres, gehen Sie einfach zum Lernen. Das komplette Tutorial kann angezeigt werden: Bootstrap 3.0 Tutorial
Karussell
Das Folgende ist ein Karussellfall, das von diesem Plug-in und verwandten Komponenten hergestellt wurde.
<body> <div id = "Carousel-example-generic" data-ride = "carousel"> <!-Indikatoren-> <ol> <li data-target = "#Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "#carousel-exple-exampel-generic" data-blide-lside-zu-= "1" 1 "> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </li-li-example-generic" data-blide "data-lside" data-schlagdung = "1" 1 "> </> </> </> </> </> <- data-target="#carousel-example-generic" data-slide-to="2"></li></ol> <!-- Wrapper for slides --><div style="text-align:center"><div><img >/img></div><div><img >/img></div><div><img >/img></div><!-- Controls --><a href="#carousel-example-generic" data-slide="prev"><span></span></a><a href="#carousel-example-generic" data-slide="next"><span></span></a></div><script src="js/jquery-2.0.3.min.js"></script><script src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript"> // $ ('. Carousel'). Carousel ('Next'); </script> </body>Internet Explorer 8 & 9 unterstützt keine Übergangsanimationseffekte
Bootstrap implementiert Animationseffekte basierend auf CSS3, aber Internet Explorer 8 & 9 unterstützt diese erforderlichen CSS -Eigenschaften nicht. Daher gehen Übergangsanimationseffekte bei beiden Browsern verloren. Darüber hinaus beabsichtigt Bootstrap nicht, jQuery-basierte alternative Funktionen zu verwenden.
Optionale Optionen
In jedem .Initem können Sie jeder Folie .Carousel-Kapion hinzufügen. Sie können auch jeden HTML -Code hinzufügen, der automatisch angeordnet und formatiert wird.
<div> <img>/img> <div> <h4> Erstes Thumbnail -Label </h4> <p> cras Justo Odio, Dapibus AC Facilisis in, Egestas Eget Quam. Donec ID Elit Non Mi Porta Gravida bei Eget Metus. Nullam id dolor id nibh ultrikies fahrt ut id elit. </P> </div> </div>
Fügen Sie drei Elemente hinzu, und dann wird der Effekt bewertet.
Zugänglichkeitsprobleme
Die Karussellkomponente ist nicht mit den Barrierefreiheitsstandards kompatibel. Wenn Kompatibilität erforderlich ist, berücksichtigen Sie andere Optionen für die Präsentation von Folien.
Verwendung durch Datenattribut
Das Datenattribut kann die Positionierung des Karussells leicht steuern. Die Data-Slide kann die Vor- oder nächsten Schlüsselwörter akzeptieren, die die Wiedergabeposition steuern. Darüber hinaus kann das Slide-Index, das mit 0 beginnt, auch durch Datenklammern weitergegeben werden.
Das Data-Ride = "Carousel" -attribut wird verwendet, um die Karussellkomponente zu markieren, die nach dem Laden der Seite beginnt.
Fügen Sie es in den äußersten Karussellbehälter hinzu
<div id = "Carousel-example-generic" data-ride = "carousel">
über JavaScript
Starten Sie die Karussellkomponente manuell (oben schalten wir die Karussellkomponente automatisch mithilfe der Data-Ride-Eigenschaft ein):
$ ('. Carousel'). Carousel ()
Optionen
Optionen können durch Dateneigenschaften oder JavaScript weitergeleitet werden. Für Datenattribute müssen Sie den Optionsnamen nach Daten einfügen, z. B. Dateninterval = "".
Verfahren
$ (""). Karussell (Optionen)
Initialisieren Sie die Karussellkomponente, akzeptieren Sie einen optionalen Optionsparameter für Objekttypen und starten Sie die Dia -Schleife.
$ ('. Carousel'). Carousel ({Intervall: 2000}).Carousel ('Zyklus'), jeden Rahmen von links nach rechts.
.Carousel ('Pause') stoppt das Karussell.
.Carousel (Nummer) positioniert das Karussell auf den angegebenen Frame (Frame -Index startet mit 0, ähnlich wie ein Array).
.Carousel ('prev') kehrt zum vorherigen Frame zurück.
.Carousel ('Next') Gehen Sie zum nächsten Frame.
Ereignis
Die Karussellkomponente von Bootstrap enthält zwei Ereignisse zum Hören.
$ ('#Carousel-Example-Generic'). On ('Slide.bs.Carousel', Funktion () {alert (1);})Dies bindet Ereignisse an die Karussellkomponente und führt sie dann zur entsprechenden Laufzeit aus. Dies wurde in den vorherigen JavaScript-Plug-Ins viel erklärt, und die Formulare sind alle allgemein, sodass Sie sie einfach verwenden können.
Bild
Dies sind einige weitere praktische Karousel-Plug-Ins, die sehr gute Ergebnisse erzielen. Wenn sie vernünftigerweise verwendet werden, werden Sie Ihrer Seite immer Punkte hinzufügen. Ich hoffe, es wird für das Lernen aller hilfreich sein.
Wenn Sie nicht zufrieden sind, können Sie diese Artikel für eingehende Studien überprüfen: Der Herausgeber von "Bootstrap Learning Tutorial" macht mit Ihnen Fortschritte!
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und zwei aufregende Themen anzuhängen:
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.