Jetons un coup d'œil à l'effet du carrousel de l'image de bootstrap:
Ce qui précède est l'effet partagé par tout le monde, mais c'est la page d'accueil de la musique de cloud NetEase.
N'oubliez pas d'apparaître d'abord dans la bibliothèque de contrôle officielle d'IOS7, et Android a également ajouté cette vue à une certaine version. La conception est universelle..bootstrap3 prend également en charge l'utilisation de tels effets sur le Web.
Ensuite, une analyse simple:
1. Analyse structurelle
Une image de carrousel comprend principalement trois parties:
☑ Photos de carrousel
☑ COMPRESSION POUR
☑ Le contrôleur des photos de carrousel
Étape 1: Concevez le conteneur des photos de carrousel. Le style de carrousel est adopté dans le cadre de bootstrap, et une valeur d'ID est définie pour ce conteneur, de sorte que l'attribut de données est utilisé pour déclarer le déclencheur plus tard.
Copiez le code comme suit: <div id = "slidershow"> </ div>
Étape 2: Concevez un comptoir d'image de carrousel. Ajoutez une calculatrice d'image de carrousel à l'intérieur du récipient DIV.Caresel en utilisant le style carrousel-indicateurs. Sa fonction principale est d'afficher l'ordre de lecture de l'image actuelle (il y a plusieurs images, et les mêmes listes sont généralement utilisées pour le faire:
<div id = "slidershow"> <! - Définissez l'ordre des carrousels d'image -> <lo> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </l> </div>
Étape 3: Concevez la zone de lecture de l'image du carrousel. Dans l'effet entier de l'image du carrousel, la zone de lecture est la zone la plus critique, qui est principalement utilisée pour placer des images qui doivent être stimulées. Cette zone est contrôlée à l'aide du style de carrousel, et elle est également placée dans le contenant du carrousel, et chaque image de carrousel est placée à travers le conteneur de l'élément:
<div id = "slidershow"> <! - Définissez l'ordre des carrousels d'image -> <lo> <li> 1 </li>… </l> <! - Définissez les photos des carrousels -> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145. </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </ div>… <div> <a href = "##"> <imgg src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div>… <v> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </ div> </div>
Étape 4: Définissez la description de l'image du carrousel. De nombreux effets d'image de carrousel ont également leur propre titre et leur description sur chaque image. En fait, le carrousel dans le cadre de bootstrap fournit également des effets similaires. Ajoutez simplement le code correspondant en bas de l'image dans l'élément.
<div id = "Slidershow"> <! - Définissez l'ordre des carrousels d'image -> <lo> <li> 1 </li>… </l> <! - Définissez les photos des carrousel -> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145. <! - Image Titre et Description Contenu correspondant -> <div> <h3> Titre de l'image </h3> <p> Contenu description ... </p> </div> </div>… </div> </div>
Étape 5: Concevez le contrôleur d'image du carrousel. Plusieurs fois, les photos de carrousel ont également un contrôleur qui joue vers l'avant et vers l'arrière. Dans le carrousel, il est réalisé en combinant la gauche et la droite avec un style de contrôle du carrousel. Lorsque la gauche signifie la lecture vers l'avant, à droite signifie la lecture arrière. Il est également placé dans le contenant du carrousel:
<div id = "slidershow"> <! - Définissez l'ordre des carrousels d'image -> <lo>… </l> <! - Définissez les photos du carrousel -> <div>… </v> <! - Définissez le contrôleur d'image du carrousel -> <a href = ""> <span> </pan> </a> <a href = "" "> <pan> </pandé
2. Processus de mise en œuvre
<div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "# Caousesel-Example-Generic" Data-Slide-to = "1"> </li> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "2"> </li> </l> <! - Wrapper pour les diapositives -> <div role = "listbox"> <div> <img src = "..."> <v> ... </ div> </ div> </ div> </ div> </ div> </ div> ... </ div> <! - Contrôles -> <a href = "# Carousel-Example-Generic" role = "Button" Data-Slide = "Prev"> <span> </span> <span> Précédent </span> </a> <a href = "# carousel-example-generic" role = "Button" Data-Slide = "Next"> <pan> </pander> <panneg
Divisé en trois parties
1. Indicateur
Une partie est le petit point ci-dessous ... est l'indicateur
La classe OL est utilisée pour créer cet indicateur
Chaque attribut Data-Slide-to = "0" est utilisé pour guider l'emplacement pour définir l'état d'activation par défaut.
article
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Il n'y a pas de suspense, remplissez simplement le titre et le contenu de l'image
2. Contrôleurs gauche et gauche
Le code est le suivant
<a href = "# myCaRousel" role = "Button" Data-Slide = "PREV"> <span aria-hidden = "true"> </span> <span> précédent </span> </a> <a href = "# mycarel" role = "Button" Data-Slide = "Next"> <span aria-hidden = "true"> </pank
Fonctionnement en JavaScript
initialisation
$ ('. Carousel'). Carrousel ({intervalle: 2000})Effectuer une boucle
.Carousel («cycle»)
pause
.Carousel («pause»)
Le positionnement vers un élément spécifique commence à 0
.Carousel (numéro)
Le précédent
.Carousel ('prev')
Suivant
.Carousel («Next»)
Plus de contenu sur Bootstrap peut également être trouvé dans des sujets spéciaux: "Bootstrap Learning Tutorial"
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.