Ich habe drei Bootstrap -Bildkarousel -Effekte geteilt, und ich glaube, es gibt immer einen, mit dem Sie zufrieden sind!
Der erste Effekt: Bootstrap Simple Carousel
<! DocType html> <html> <Head> <title> bootstrap Instance- Einfache Karussell-Plug-In </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesHeet"> < src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href = "#mycarousel" data-Slide = "next">> </a> </div> </body> </html>
Der zweite Typ: Karussell mit Titel (Handbuch)
<! DocType html> <html> <Head> <title> Bootstrap -Instanz - Titel des Karussell -Plug -in </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> < src="/bootstrap/3.0.3/js/bootstrap.min.js"></script><body><div id="myCarousel"> <!-- Carousel Metrics--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> <div>Title 1</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> <div>Title 2</div> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> <div>Title 3</div> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" Data-Slide = "prev"> ‹</a> <a href = "#mycarousel" data-Slide = "Weiter"> ›</a> </div> </body> </html>
Der dritte Typ: JS Control Automatic Carousel
<!DOCTYPE html><html><head> <title>BootstrapJS control carousel</title> <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="/jquery/2.0.0/jquery.min.js"></script> <script src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-Carousel-Indikator-> <ol> <li data-target = "#mycarousel" dataSlide-to = "0"> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li-target data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href = "#mycarousel" data-slide = "next"> ›</a> <!-Steuertaste-> <div style =" text-align: center; "> <Eingabe type =" button "value =" start "> <Eingabe-Typ" Eingabe-type ". type = "button" value = "dia 2"> <Eingabe type = "button" value = "dia 3"> </div> </div> <script> $ (function () {// Initialisieren Sie Carousel $ (". Start-Slide"). click (function () {$ ("#mycarousel"). carousel ('cycle';});}); Karussell $ (". $ (". Next-Slide"). Click (Funktion () {$ ("#mycarousel"). Carousel ('Next');}); $ ("#mycarousel"). Karussell (1); }); </script> </body> </html>Spezifische Parameter können in der methode carousel () festgelegt werden, wie z. B.:
Bei der Verwendung können Sie die entsprechenden Parameter des Status beim Initialisieren des Plug-Ins übergeben, z. B.:
$ ("#SlidersHow"). Carousel ({Intervall: 3000});Das Carousel-Plug-In im Bootstrap-Framework bietet Benutzern wie folgt auch mehrere spezielle Aufrufmethoden:
.Carousel ("Zyklus"): Spiel von links nach rechts;
.Carousel ("Pause"): Stop Loop -Wiedergabe;
.Carousel ("Nummer"): Schleifen zum angegebenen Frame startet das Index von 0, ähnlich wie ein Array;
.Carousel ("prev"): zurück zum vorherigen Rahmen;
.Carousel ("Next"): Nächster Frame
Verwenden Sie das Datenattribut, um das Karussell zu steuern:
<! DocType html> <html> <Head> <titels> Bootstrap -Instanz - Karussell -Plug -in -Methode </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesSheet"> < src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js data-wrap="true" data-interval="1000"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0" > </li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel project --> <div> <div> <img src="/wp-content/uploads/2014/07/slide1.png"> </div> <div> <img src="/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel" Data-Slide = "prev"> ‹</a> <a href = "#mycarousel" data-schlau = " style = "text-align: center;"> <Eingabe type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "Vorheriger Folie"> <Eingabe type = "button" value = "Nächstes Folie"> <Eingabe-Typ = "Button" -Weicher ". </body> </html>
Die deklarative Methode wird durch Definieren des Datenattributs implementiert, das die Position des Karussells leicht steuern kann. Es enthält hauptsächlich die folgenden Typen:
1. Data-Ride-Eigenschaft: Nehmen Sie das Wertkarousel und definieren Sie es auf Karussell.
2. Data-Target-Eigenschaft: Nehmen Sie den ID-Namen oder einen anderen vom Wert Carousel definierten Stilkennung. Wie im vorherigen Beispiel gezeigt, nehmen Sie den Wert als "#slidershow" und definieren Sie ihn auf jedem Li des Karussellschalters.
3.. Data-Slide-Attribut: Die Werte umfassen die Vorhilfe, als nächstes, vorwärts scrollen, und als nächstes bedeutet Scrollen vorwärts. Dieser Eigenschaftswert ist auch auf dem A -Link des Karussell -Controllers definiert, und der HREF -Wert von Controller wird auf den ID -Namen oder einen anderen Stilkennung von Container 4. Carousel eingestellt.
5. Data-Slide-to-Attribut: Wird zum Übergeben des Index eines bestimmten Frame verwendet, z.
Hier müssen Sie beachten, dass Sie der #slidershow -Ebene einen Folienstil hinzufügen und den Bild- und Bildschaltwirkung verwenden können, um glatt zu sein.
<div id = "SlidersHow" data-ride = "Carousel"> ... </div>
Zusätzlich zu Data-Ride = "Carousel", Data Slide und Data Slide-to unterstützt die Karussellkomponente auch drei weitere benutzerdefinierte Eigenschaften:
Der folgende Code implementiert "Karussell schaltet nicht kontinuierlich" und "Karouselzeitintervall ist 1 Sekunde".
<div id = "SlidersHow" data-ride = "Carousel" data-wrap = "false" dateninterval = "1000"> .... </div>
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
Tutorial für Bootstrap -Tischnutzung
Bootstrap-Plug-in-Nutzungs-Tutorial
Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
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.