L'effet du carrousel d'image peut être vu sur le Web, et de nombreuses personnes l'appellent également un diaporama. L'effet principal de l'affichage est de jouer plusieurs images dans un cycle, en jouant de droite à gauche. Le jouer s'arrêtera lorsque la souris planera sur l'image. Si la souris plane ou clique sur le point dans le coin inférieur droit, l'image correspondante sera affichée.
Cet effet de carrousel d'image est implémenté dans le cadre de bootstrap via le plug-in de carrousel
Capture d'écran de l'effet de démonstration:
Code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <! - <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootsstrap.min.css"> -> <lin href = "CSS / bootstrap.min.css" /> <ystyle> Body {padding: 10px; marge: 10px;} </ style> </ head> <body> <div id = "MyCarel"> <! - Étape 1: Conce-concepteurs pour les images de carrouse. -> <! - #SLIDERSHOW La couche ajoute du style de diapositive et utilisez des images et des images pour changer d'effets pour la rendre lisse -> <Ol> <! - Étape 2: Concevez un compteur d'images de carrousel. --><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 Style de carrousel-inner à contrôler -> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <v> <h4> titre 1 </h4> <p> Image 1 </p> </div> <v> <Mgg. src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> titre 2 / h4> <p> image 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> titre 2 / h4> <p> image 2 </p> </div> <div> <img src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> titre trois </h4> <p> Introduction au contenu de l'image Three </p> </div> </div> <! - Étape 4: Concevoir un contrôleur d'image de Carousel. Jouez à l'avant le contrôle du carrousel gauche et le contrôleur qui joue en arrière -> <a href = "# myCaRousel" data-slide = "prev"> ‹<! - <a href = "# slidershow" role = "Button" data-Slide = "prev"> -> <pan> </pan> </a> <a href = "# mycarousel" data-slide = "next" >› <span> </span> <! - <a href = "# Carousel-Example-Generic" Data-Slide = "Prev"> <span> </span> </a> <a href = "# Carousel-Example-Generic" data-slide = "next"> <span> </span> </a> -> </div> <cript> $ ('. Carousel'). Carousel () </script> <script type = "text / javascript" src = "js / jquery.min.js"> </cript> <script type = "Text / javascript" 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 Ligne de fichier 5835 à la ligne 5863 * /. Carousel-indicator {position: Aboste; / * Positionnement absolu de toute la zone de comptage * / en bas: 10px; / * 10px du bas du carrousel de conteneur * / z-index: 15; / * Réglez son niveau sur l'axe Z * // * Centre toute la zone de comptage au niveau * / gauche: 50%; largeur: 60%; padding-left: 0; marge-left: -30%; Text-Align: Centre; Style de liste: Aucun;}. CAROURSEL-INDICATEURS LI {Affichage: en ligne de bloque; -999px; curseur: pointeur; fond-couleur: # 000/9; fond-couleur: rgba (0, 0, 0, 0); bordure: 1px solide #fff; border-radius: 10px;} / * définir le style d'état actuel * /. Carousel-indicator.Carrousel Picture - Player un carrousel tactile déclaratif
Il existe deux façons de déclencher le diagramme du carrousel, l'un est déclaratif et l'autre est JavaScript. Tout d'abord, examinons la méthode déclarative.
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:
• Propriété des données de données: prenez le carrousel de valeur et définissez-les sur le carrousel.
• Propriété de cible de données: prenez le nom d'identification ou un autre identifiant de style défini par le carrousel de valeur. Comme indiqué dans l'exemple précédent, prenez la valeur "#slidershow" et définissez-la sur chaque LI du compteur de carrousel.
• Attribut de glissement de données: les valeurs incluent le prev, suivant, PREV signifie faire défiler vers l'arrière, et le suivant signifie faire défiler vers l'avant. 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 carrousel conteneur.
• 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 cette trame spécifiée (l'indice commence à partir de 0), et est également défini sur chaque LI du compteur de carrousel.
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:
| Nom d'attribut | taper | valeur par défaut | décrire |
| intervalle de données | nombre | 5000 | Temps d'attente (millisecondes) pour la rotation des diapositives. Si faux, le carrousel ne démarre pas automatiquement la boucle |
| apparition des données | chaîne | flotter | La souris par défaut est suspendue dans la zone de diapositive et la lecture commencera lors du départ. |
| faire un détournement de données | Valeur booléenne | vrai | Est la boucle continue du carrousel |
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>
Les trois attributs ci-dessus peuvent être définis sur les éléments de conteneur ou sur les identifiants (ou les liens de contrôle gauche et droite), mais cette dernière définition a une priorité plus élevée.
Carrousel d'image - Méthode de déclenchement javascrit
Les trois instructions Data-ride = "Carousel" et Data-Slide = "Prev" et Data-Slide = "Next" ont été supprimées. Utilisons le code JS pour implémenter les fonctions de "Carrousel d'image automatique" et "boutons vers l'avant et vers l'arrière".
Utilisez JS pour implémenter les fonctions du "carrousel d'image automatique" et "boutons avant et arrière"
Par défaut, si l'attribut Data-Ride = "Carrousel" est défini sur le conteneur du carrousel, l'effet de commutation d'image du carrousel sera automatiquement chargé après le chargement de la page. Si l'attribut de ride de données n'est pas défini, la commutation d'image du carrousel peut être déclenchée via la méthode JavaScript. La méthode d'utilisation spécifique est la suivante:
La copie de code est la suivante:
$ (". Carrousel"). Carousel ();
Vous pouvez également le spécifier par l'ID de conteneur:
La copie de code est la suivante:
$ ("# slidershow"). Carousel ();
Les paramètres spécifiques peuvent être définis dans la méthode carrousel (), tels que:
| Nom d'attribut | taper | valeur par défaut | décrire |
| intervalle | nombre | 5000 | Temps d'attente (millisecondes) pour la rotation des diapositives. Si faux, le carrousel ne démarre pas automatiquement la boucle |
| pause | chaîne | flotter | La souris par défaut est suspendue dans la zone de diapositive et la lecture commencera lors du départ. |
| envelopper | Valeur booléenne | vrai | Est la boucle continue du carrousel |
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});En fait, lorsque nous configurons les paramètres de la méthode Carousel (), l'effet du carrousel peut être automatiquement commuté. Cependant, le plug-in Carrousel dans le framework Bootstrap fournit également aux utilisateurs plusieurs méthodes d'appel spéciales, comme suit:
• .carel ("cycle"): joue de gauche à droite;
• .carel ("Pause"): Arrête la lecture de la boucle;
• .carel ("numéro"): boucle à la trame spécifiée, l'indice commence à partir de 0, similaire à un tableau;
• .carel ("prev"): retour à la trame précédente;
• .carousel ("Suivant"): cadre suivant
Par exemple, la méthode d'appel précédente, les boutons avant et arrière ne peuvent pas fonctionner correctement. En fait, ils peuvent être utilisés pour travailler normalement par le biais des méthodes .caresel ("prev") et .carel ("suivant"). Le code est le suivant:
$ (function () {$ ("# slidershow"). Carousel ({interval: 2000}); $ ("# slidershow a.left"). cliquez (fonction () {$ (". Carousel"). Carousel ("prev");}); $ ("# slidershow A.Right "). Cliquez sur (fonction () {$ (". Carousel "). Carousel (" Next ");});}); <! Doctype html> <html> <éadf> <meta charset = "utf-8"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> Body {padding: 10px: margin: 10px;} </ style> </ head> <body> <div id = "Carousel-Example" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example" Data-Slide-to = "0"> </ li> <li data-target = "# caroussel-example" Data-Slide-to = "1"> </ li> <li> lide Data-Target = "# Carousel-Example" Data-Slide-to = "1"> </li> <li data-target = "# Carousel-Example" Data-Slide-to = "1"> </li> <li data-target = "# carousel-example" Data-Slide-to = "2"> </li> </l> <! 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><!-- Contrônes -> <a href = "# carousel-example" data-slide = "prov"> <pander> href = "# carrousel-example" data-slide = "next"> <span> </span> </a> </div> <! - <script> $ (function () {$ ('. Carousel'). Carousel ();}); </script> -> <script src = "js / jquet. 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 recommande des sujets liés à Bootstrap:
Compétences de fonctionnement des composants bootstrap
Résumé des connaissances liées à la bootstrap
Ce qui précède est l'explication détaillée des exemples d'utilisation du diagramme de rotation du carrousel bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!