Der Image Carousel -Effekt ist im Web zu sehen, und viele Menschen nennen es auch Diashow. Der Haupteffekt der Anzeige besteht darin, mehrere Bilder in einem Zyklus zu spielen und von rechts nach links zu spielen. Das Spielen wird innehalten, wenn die Maus über dem Bild schwebt. Wenn sich die Maus in der unteren rechten Ecke befindet oder auf den Punkt klickt, wird das entsprechende Bild angezeigt.
Dieser Bildkarousel-Effekt wird im Bootstrap-Framework über das Karussell-Plug-In implementiert
Screenshot des Demo -Effekts:
Code:
<! DocType html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "styleSheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootStrap.min href = "css/bootstrap.min.css"/> <style> body {padding: 10px; margin: 10px;} </style> </head> <body> <div id = "mycarousel"> <!-Schritt 1: Designbehälter für Karussellbilder. -> <!-#slidershow Layer fügt einen Schleifstil hinzu und verwende Bilder und Bilder, um die Effekte zu wechseln, um sie glatt zu machen-> <ol> <!-Schritt 2: Entwerfen Sie einen Karussell-Bildzähler. --><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><div><!--Step 3: Design the carousel picture playback area and use the Carousel-innerer-Stil zu kontrollieren-> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <div> <h4> Titel 1 </h4> <p> Bild 1 </p> </div> <div> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img src = "http://images3.c-c-crip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> Titel 2/H4> <p> Bild 2 </p> </div> <div> <img src = "http://images3.c-c-crip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> Titel 2/H4> <p> Bild 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> Titel drei </h4> <p> Einführung in den Inhalt des Bildes drei </p> </div> </div> <! Spielen Sie den linken Karussell-Kontroll-Vorwärts und den Controller, der rückwärts spielt-> <a href = "#mycarousel" data-slide = "prev"> ‹<! Data-Slide = "Next"> ›<Pan> </span> <!-<a href ="#Carousel-example-generic "data-Slide =" prev "> <span> </span> </a> <a href ="#carousel-exam-generic " Data-Slide = "Next"> <span> </span> </a>-> </div> <script> $ ('. Carousel'). carousel () </script> <script type = "text/javascript" src = "js/jquery.min src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootStrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /* bootstrap.css /*Absolute Positionierung des gesamten Zählbereichs*/unten: 10px; /*10px vom Boden des Container-Karussells*/Z-Index: 15; /*Set its level on the Z axis*//*Center the entire counting area at the level*/left: 50%;width: 60%;padding-left: 0;margin-left: -30%;text-align: center;list-style: none;}.carousel-indicators li {display: inline-block;width: 10px;height: 10px;margin: 1px;text-indent: -999px;Bildkarousel-Spielen von deklarativem Touch Carousel
Es gibt zwei Möglichkeiten, das Karusselldiagramm auszulösen, einer ist deklarativ und der andere JavaScript. Schauen wir uns zunächst die deklarative Methode an.
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:
• Data-Ride-Eigenschaft: Nehmen Sie das Wertkarousel und definieren Sie es auf Karussell.
• 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 "#Slidershow" und definieren Sie ihn auf jedem Li des Karussellschalters.
• Data-Slide-Attribut: Die Werte umfassen Prev, Weiter, 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 des Controllers wird auf den ID -Namen oder einen anderen Stilkennung des Container -Karussells eingestellt.
• Data-Slide-to-Attribut: Wird zum Übergeben des Index eines bestimmten Frame verwendet, z.
Zusätzlich zu Data-Ride = "Carousel", Data Slide und Data Slide-to unterstützt die Karussellkomponente auch drei weitere benutzerdefinierte Eigenschaften:
| Attributname | Typ | Standardwert | beschreiben |
| Dateninterval | Nummer | 5000 | Wartezeit (Millisekunden) für die Folienrotation. Wenn falsch, startet das Karussell die Schleife nicht automatisch |
| Datenpause | Saite | schweben | Die Standardmaus wird im Folienbereich suspendiert und die Wiedergabe beginnt beim Ablassen. |
| Data-Wrap | Boolescher Wert | WAHR | Ist die Karussell -kontinuierliche Schleife |
Der folgende Code implementiert "Karussell schaltet nicht kontinuierlich" und "Karouselzeitintervall ist 1 Sekunde".
<div id = "SlidersHow" data-ride = "Carousel" data-wrap = "false" data-interval = "1000"> ...... </div>
Die oben genannten drei Attribute können auf Containerelementen oder Identifikatoren (oder linken und rechten Kontrollverbindungen) definiert werden, aber die letztere Definition hat eine höhere Priorität.
Bild Karussell-JavaScript-Triggermethode
Die drei Anweisungen Data-Ride = "Carousel" und Data-Slide = "Prev" und Data-Slide = "Weiter" wurden entfernt. Verwenden wir JS Code, um die Funktionen von "Automatic Picture Carousel" und "Vorwärts- und Rückwärtsschaltflächen" zu implementieren.
Verwenden Sie JS, um die Funktionen von "Automatic Picture Carousel" und "Vorwärts- und Rückwärtsschaltflächen" zu implementieren.
Wenn das Attribut data-ride = "Carousel" im Karussellbehälter definiert ist, wird standardmäßig der Karussell-Bild-Switching-Effekt nach dem Laden der Seite automatisch geladen. Wenn das Data-Ride-Attribut nicht definiert ist, kann das Karussellbildschalter über die JavaScript-Methode ausgelöst werden. Die spezifische Verwendungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
$ (". Karussell"). Carousel ();
Sie können es auch nach der Container -ID angeben:
Die Codekopie lautet wie folgt:
$ ("#Slidershow"). Carousel ();
Spezifische Parameter können in der methode carousel () festgelegt werden, wie z. B.:
| Attributname | Typ | Standardwert | beschreiben |
| Intervall | Nummer | 5000 | Wartezeit (Millisekunden) für die Folienrotation. Wenn falsch, startet das Karussell die Schleife nicht automatisch |
| Pause | Saite | schweben | Die Standardmaus wird im Folienbereich suspendiert und die Wiedergabe beginnt beim Ablassen. |
| wickeln | Boolescher Wert | WAHR | Ist die Karussell -kontinuierliche Schleife |
Bei der Verwendung können Sie die entsprechenden Parameter des Status beim Initialisieren des Plug-Ins übergeben, z. B.:
$ ("#SlidersHow"). Carousel ({Intervall: 3000});Wenn wir Parameter für die Carousel () -Methode konfigurieren, kann der Karousel -Effekt automatisch umgeschaltet werden. Das Karussell-Plug-In im Bootstrap-Framework bietet Benutzern jedoch auch einige spezielle Anrufmethoden wie folgt:
• .Carousel ("Zyklus"): Spielt von links nach rechts;
• .Carousel ("Pause"): Stop Loop -Wiedergabe;
.
• .Carousel ("prev"): zurück zum vorherigen Rahmen;
• .Carousel ("Next"): Nächster Frame
Zum Beispiel können die vorherige Anrufmethode die Vorwärts- und Rückschaltflächen nicht ordnungsgemäß funktionieren. Tatsächlich können sie verwendet werden, um normal durch die Methoden. Der Code ist wie folgt:
$ (function () {$ ("#Slidershow"). Carousel ({Interval: 2000}); A.Right "). Click (function () {$ (". Carousel "). Carousel (" Next ");});}); <! DocType html> <html> <head> <meta charset = "utf-8"> <link rel = "styleSheet" href = "http://maxcdn.bootStrapcdn.com/bootstrap/3.2.0/css/bootstrap.Min.Min.cs. 10px;}</style></head><body><div id="carousel-example" data-ride="carousel"><!-- Indicators --><ol><li data-target="#carousel-example" data-slide-to="0"></li><li data-target="#carousel-example" data-slide-to="1"></li><li Data-target = "#Carousel-Exampe" Data-Slide-to = "1"> </li> <li data-target = "#carousel-example" data-klide-to = "1"> </li> <li data-target = "#Carousel-exampel" Data-SLIDE-to = "2"> </li> </ol> <! src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /><DIV>...</div></div><Div><Img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /><DIV>...</div></div><Div><Img src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /><DIV>...</div></div><! href = "#carousel-example" data-slide = "next"> <span> </span> </a> </div> <!-<script> $ (function () {$ ('. Carousel'). Carousel ();}); src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>-> <!-<script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>Wulin.com empfiehlt Bootstrap -bezogene Themen:
Bootstrap -Komponenten Betriebsfähigkeiten
Zusammenfassung des Kenntnisses im Zusammenhang mit Bootstrap
Das obige ist die detaillierte Erläuterung der Verwendungsbeispiele für Bootstrap -Karussell -Rotationsdiagramm, die Ihnen vom Herausgeber vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!