Cet exemple fournit une analyse complète de l'utilisation du carrousel dans Bootstrap pour votre référence. Le contenu spécifique est le suivant
Fichier de code source:
Carrousel.scs
Carrousel.js
Principe de mise en œuvre:
Masquez tous les éléments à afficher, puis spécifiez que le bloc actuel à afficher, la largeur et la hauteur adaptables
Analyse du code source:
1. Structure HTML: principalement divisée en quatre parties
1.1. CONTUTER: Le DIV le plus externe, nécessite un data-ride = "Carrousel" à spécifier comme un plug-in de lecture de roue, et fournit un ID pour faciliter l'association de l'indicateur de cercle.
1.2. La pièce de liste d'images est enveloppée d'une div extérieure, puis chaque IMG sera enveloppé d'une div, et la classe est enveloppée par l'élément.
1.3. Indicateur de cercle: utilisez une liste OL pour afficher ses éléments de liste graphique. Chaque élément de liste doit spécifier l'attribut Data-Slide-to = "Index", qui est utilisé pour marquer le numéro d'index du cercle actuel.
1.4. Boutons de contrôle gauche et gauche: réalisez la fonction du déplacement à gauche et à droite
2. Style CSS
2.1. Carousel: il n'y a qu'une seule marque de positionnement relative
2.2. Carrousel-inner: pivotez la zone de liste d'images, où chaque élément a un élément pour le modifier
2.2.1. Actif, suivant et prévu sont considérés comme visibles.
2.2.2. Caption de carrousel: cela signifie que chaque élément doit avoir des informations de titre et que la position par défaut s'affiche.
2.3. Contrôle de carrousel: définit le style des boutons gauche et droit, qui définira des informations telles que le gradient et la transparence. Il fournit deux styles supplémentaires: Icon-Prev et Icon-Next.
2.4. Carrousel-Indicators: Le style de partie du cercle est absolument positionné. Chaque Li est défini comme un élément de bloc en ligne. Utilisez le texte-indent: -999 pour masquer la police.
3. Code js
3.1. La méthode principale du noyau est la diapositive, qui réalise la commutation des images
3.1.1. Lorsque le commutateur d'image est effectué pour la première fois, la méthode de pause sera appelée pour définir provisoirement la minuterie. Ce n'est qu'après la fin du commutateur d'image que la méthode du cycle sera appelée pour activer la minuterie.
3.1.2. Accepté deux paramètres: Type et Suivant
3.1.2.1. Type: signifie modifier les pages vers le haut ou vers le bas
3.1.2.2. Suivant: cette fois, il s'affiche comme élément actif. S'il n'est pas transmis, vous devez utiliser la méthode GetItemfordirection pour l'obtenir.
3.1.3. Obtenez des paramètres de base tels que $ actif (article actuellement actif), $ suivant (élément qui doit être un élément actif), iscycling (poignée de minuterie pour le carrousel de minuterie), direction (direction) et autres paramètres de base
3.1.4, puis déclenchez l'événement Slide.BS.Carel
3.1.5. Puis définissez l'élément d'index des indicateurs
3.1.6. Changer des images. Si vous soutenez l'animation CSS, utilisez l'animation pour changer. Sinon, ajoutez CSS directement au commutateur.
3.1.7. Principe de commutation d'animation:
3.1.7.1. Précédent: Il s'agit d'un style qui sera combiné en faisant défiler l'image vers la droite: droit actif (élément actif) PREV DROIT (élément suivant). À l'heure
3.1.7.2. Suivant: Faites défiler l'image à gauche et à gauche suivante (élément suivant). À l'heure actuelle, ensuite lui-même est à 100%, mettez l'image à l'extrême droite.
3.1.7.3. Active à droite: l'image doit être à droite, donc elle doit déplacer 100% de la largeur de l'image.
3.1.7.4. Gauche active: l'image est à gauche, alors la largeur de l'image doit être exécutée -100%
3.1.7.5. Image comparative:
3.1.8. Code d'implémentation (hors CSS3):
.Carousel-inner> .active, .carel-inner> .next, .carel-inner> .prev {display: block;}. carrousel-inner> .active {Left: 0;}. Carousel-inner> .next, .carel-inner> .prev {position: absolu; en haut: 0; Largeur: 100%;}. Carousel-inner> .Next {gauche: 100%;}. Carousel-inner> .prev {Left: -100%;}. Carousel-inner> .next.left, .carel-inner> .prev.right {gauche: 0;}. Carousel-inner> .left {gauche: -100%;}. .Active.Right {Left: 100%;}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 du plug-in bootstrap
Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.