J'ai partagé trois effets de carrousel d'image bootstrap, et je crois qu'il y en a toujours un dont vous êtes satisfait!
Le premier effet: carrousel simple bootstrap
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - Plug-in carrousel simple </ title> <link href = "/ bootstrap / 3.0.3 / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ jQuery / 2.0.0 / jQuery.min.js"> </ script> src = "/ bootstrap / 3.0.3 / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Metrics du carrousel -> <l> <li data-target = "# mycarel" Data-slide-to = "0"> </li> <li data-target = "# mycarousel" Data-Slide-to = "1"> </li> <li data-target = "# myCaRousel" Data-Slide-to = "2"> </li> </l> <! - Carousel Project -> <div> <img src = "/ div> <v> <img / 2014/07 / Slide1.png"> </v> <v> <img src = "/ wp-content / uploads / 2014/07 / Slide2.png"> </div> <v> <img src = "/ wp-conont-Contrac href = "# myCaRousel" data-slide = "next" >› </a> </div> </ody> </html>
Le deuxième type: carrousel avec titre (manuel)
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - Titre de Caroulsel Plug-in </Title> <link href = "/ bootstrap / 3.0.3 / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ jQuery / 2.0.0 / jQuery.min.js"> </ jquery / 2.0.0 / jQuery.min. src = "/ bootstrap / 3.0.3 / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Metrics du carrousel -> <l> <li data-target = "# mycarel" Data-slide-to = "0"> </li> <li data-target = "# mycarousel" Data-Slide-to = "1"> </li> <li data-target = "# mycarel" data-slide-to = "2"> </li> </l> <! - Carousel Project -> <div> <img src = "/ wp-content / uploads / 2014/07 / Slide1.png"> <div> title 1 </v> <v> <v> <v> <div> src = "/ wp-content / uploads / 2014/07 / slide2.png"> <div> title 2 </div> </div> <div> <img src = "/ wp-content / uploads / 2014/07 / slide3.png"> <v> title 3 </v> </v> </ div> <! - Carousel navigation -> <a href = "MYCARSEL data-slide = "prev"> ‹< / a> <a href = "# myCaRousel" data-slide = "next" >› </a> </div> </ body> </html>
Le troisième type: le carrousel automatique de contrôle JS Control
<!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 Indicator -> <Ol> <li data-target = "# mycaresel" data-slide-to = "0"> </li> <li data-target = "# mycarel" Data-Slide-to = "1"> </li> <li data-target = "# myCaRousel" Data-Slide-to = "2"> </li> </l> <! - Carousel Project -> <div> <img src = "/ div> <v> <img / 2014/07 / Slide1.png"> </v> <v> <img src = "/ wp-content / uploads / 2014/07 / Slide2.png"> </div> <v> <img src = "/ wp-conont-Contrac href = "# myCaRousel" data-slide = "Suivant" >› </a> <! - Button de contrôle -> <div style = "Text-Align: Center;"> <Input Type = "Button" Value = "start"> <Input Type = "Button" Value = "Pause"> <Input Type = "Button" Value = "Button" Button "> <puty Type =" Button "Value =" Type = "Button" value = "Slide 2"> <Input Type = "Button" Value = "Slide 3"> </div> </div> <script> $ (function () {// Initialize Carousel $ (". start-slide"). Cliquez sur (fonction () {$ ("# MyCaresel"). Carousel ('cycle');}); // stop Carrousel $ (". Pause-Slide"). Cliquez sur (fonction () {$ ("# MyCarel"). Carousel ('Pause');}); $ (". Next-Slide"). Cliquez sur (fonction () {$ ("# MyCarel"). Carousel ('Next');}); $ ("# MyCarel"). Carousel (1);}); $ (". Slide-Three"). }); </cript> </ body> </html>Les paramètres spécifiques peuvent être définis dans la méthode carrousel (), tels que:
Lorsque vous l'utilisez, vous pouvez transmettre les paramètres pertinents de l'état lors de l'initialisation du plug-in, comme:
$ ("# slidershow"). Carousel ({interval: 3000});Le plug-in Carrousel dans le framework Bootstrap fournit également aux utilisateurs plusieurs méthodes d'appel spéciales, comme suit:
.Carousel ("cycle"): jouer de gauche à droite;
.Carel ("Pause"): Stop Loop Playback;
.Carel ("Numéro"): boucles dans la trame spécifiée, l'indice commence à partir de 0, similaire à un tableau;
.Carel ("Prev"): retour à la trame précédente;
.Carel ("Suivant"): cadre suivant
Utilisez l'attribut de données pour contrôler le carrousel:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - méthode du plug-in carrousel </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/csss/bootsstrap.min.css" LEL = "STYLESheet"> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </ script> <script src = "http://libs.baidu.com/bootsstrap/3.0.3/js/bootstrap.min.js"> </cript> </read> data-wrap = "true" data-interval = "1000"> <! - Indicateur de carrousel -> <lo> <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> </l> <! - Project de Carousel -> <div> <div> <img src = "/ wp-content / uploads / 2014/07 / Slide1.png"> </div> <div> <img src = "/ wp-content / uploads / 2014/07 / Slide2.png"> </ divL> <imgg " src = "/ wp-content / uploads / 2014/07 / slide3.png"> </div> </div> <! - Carousel Navigation -> <a href = "# mycarel" data-slide = "prev"> ‹< / a> <a href = "# mycarel" data-lide = "Next"> ~ </a> <! style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div></div> </ body> </html>
La méthode déclarative est implémentée en définissant l'attribut de données, qui peut facilement contrôler la position du carrousel. Il comprend principalement les types suivants:
1. Propriété de ride de données: Prenez le carrousel de valeur et définissez-les sur le carrousel.
2. Propriété de cible de données: Prenez le nom d'ID ou tout autre identifiant de style défini par le carrousel de valeur. Comme indiqué dans l'exemple précédent, prenez la valeur comme "#slidershow" et définissez-la sur chaque LI du compteur de carrousel.
3. Cette valeur de propriété est également définie sur le lien A du contrôleur de carrousel, et la valeur HREF du contrôleur est définie sur le nom d'ID ou tout autre identifiant de style du conteneur 4. Carrousel.
5. Attribut Data-Slide-to: Utilisé pour passer l'indice d'une certaine trame, tel que Data-Slide-to = "2", qui peut être directement redirigé vers ce cadre spécifié (l'indice commence à partir de 0), et est également défini sur chaque LI du compteur de carrousel.
Ici, vous devez noter que vous pouvez ajouter du style de diapositive au calque #slidershow et utiliser l'effet de commutation d'image et d'image pour être lisse.
<div id = "slidershow" data-ride = "carrousel"> ... </div>
En plus de Data-Ride = "Carrousel", de la glisse de données et de la glisse de données, le composant Carousel prend également en charge trois autres propriétés personnalisées:
Le code suivant implémente "Le carrousel ne boucle pas en continu" et "L'intervalle de temps du carrousel est de 1 seconde".
<div id = "slidershow" data-ride = "carrousel" data-wap = "false" data-interval = "1000"> .... </div>
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation de la table bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède est une introduction détaillée au carrousel JavaScript Picture. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation JavaScript.