Analyse complète des compétences Bootstrap Image Carousel Effect_Javascript

1. Analyse structurelle

Une image carrousel se compose principalement de trois parties :

　☑ Carrousel d'images

　☑ Compteur d'images de carrousel

　☑ Contrôleur pour les images du carrousel

Première étape : Concevez un conteneur pour les images de carrousel. Utilisez le style carrousel dans le framework Bootstrap et définissez une valeur d'ID pour ce conteneur, afin que l'attribut data puisse être utilisé pour déclarer le déclencheur ultérieurement.

Copier le code Le code est le suivant :

b7d193b259508b70b65f3c8bd18fcc21 16b28748ea4df4d9c2150843fecfba68

Étape 2 : Concevez un compteur d'images carrousel. Ajoutez un calculateur d'images carrousel à l'intérieur du conteneur div.carousel, en utilisant le style carrousel-indicators. Sa fonction principale est d'afficher l'ordre de lecture des images actuelles (s'il y a plusieurs images, placez plusieurs li). liste séquentielle :

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

Étape 3 : Concevez la zone de lecture des images du carrousel. Dans tout l'effet des images carrousel, la zone de lecture est la zone la plus critique. Cette zone est principalement utilisée pour placer les images qui doivent être pivotées. Cette zone est contrôlée à l'aide du style carrousel-inner et est également placée dans le conteneur du carrousel, et chaque image du carrousel est placée via le conteneur d'éléments :

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div>　

Étape 4 : Définissez la description de l'image du carrousel. De nombreux effets d'image du carrousel ont également leurs propres titres et descriptions pour chaque image. En fait, Carousel dans le framework Bootstrap fournit également des effets similaires. Ajoutez simplement le code correspondant en bas de l'image dans l'article.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Étape 5 : Concevez le contrôleur d'image du carrousel. Souvent, les carrousels ont également un contrôleur avant et arrière. Ceci est réalisé dans Carousel grâce au style de contrôle de carrousel combiné avec la gauche et la droite. Parmi eux, gauche signifie jouer en avant et droite signifie jouer en arrière. Il est également placé dans le conteneur carrousel :

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

2. Lecture d'images de carrousel tactile déclaratif (aucun JS requis)

<div id="slidershow" class="carousel slide" data-ride="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0"></li>
 <li data-target="#slidershow" data-slide-to="1"></li>
 <li data-target="#slidershow" data-slide-to="2"></li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img style="height: 300px;width: 800px"></a>
 <div class="carousel-caption">
 <h3>图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

L'approche déclarative est obtenue en définissant l'attribut data, qui peut facilement contrôler la position du carrousel. Il comprend principalement les types suivants :
　1. Attribut data-ride : prenez le carrousel de valeurs et définissez-le sur le carrousel.
2. Attribut Data-target : La valeur est le nom de l'ID ou un autre identifiant de style défini par le carrousel. Comme indiqué dans l'exemple précédent, la valeur est "#slidershow", et elle est définie sur chaque li du compteur du carrousel.
3. attribut data-slide : la valeur inclut prev, next, prev signifie faire défiler vers l'arrière et next signifie faire défiler vers l'avant. Cette valeur d'attribut 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 conteneur 4. Le nom d'ID du carrousel ou un autre identifiant de style.
4. attribut data-slide-to : utilisé pour transmettre l'indice d'un certain cadre, tel que data-slide-to="2", qui peut accéder directement au cadre spécifié (l'indice commence à 0), la même définition sur chaque li du compteur carrousel.
Il convient de noter ici que vous pouvez ajouter un style de diapositive au calque #slidershow et utiliser des images et des effets de changement d'image pour avoir une sensation de fluidité.

<div id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>

En plus de data-ride="carousel", data-slide et data-slide-to, le composant carrousel prend également en charge trois autres attributs personnalisés :

Le code suivant implémente "carrousel sans boucle continue" et "l'intervalle de temps du carrousel est de 1 seconde".

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
 ......
</div>

3. Carrousel d'images de la méthode de déclenchement JavaScript
HTML :

<div id="slidershow" class="carousel slide">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
 <li data-target="#slidershow" data-slide-to="1">2</li>
 <li data-target="#slidershow" data-slide-to="2">3</li>
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 <div class="carousel-caption">
 <h3>图片标题3</h3>
 <p>描述内容3...</p>
 </div>
 </div>
 </div>
 <a class="left carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#slidershow" role="button">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

JS :

 $(function(){
 $("#slidershow").carousel({
 interval:2000
 });
 $("#slidershow a.left").click(function(){
 $(".carousel").carousel("prev");
 });
 $("#slidershow a.right").click(function(){
 $(".carousel").carousel("next");
 });
 });

Des paramètres spécifiques peuvent être définis dans la méthode carousel(), tels que :

Lors de son utilisation, vous pouvez transmettre les paramètres associés lors de l'initialisation du plug-in, tels que :

$("#slidershow").carousel({
 interval: 3000
});

Le plug-in carrousel du framework Bootstrap fournit également aux utilisateurs plusieurs méthodes d'appel spéciales. La brève description est la suivante :

.carousel("cycle") : lecture en boucle de gauche à droite
.carousel("pause") : Arrête la lecture en boucle
.carousel("number") : boucle vers le cadre spécifié, l'indice commence à 0, semblable à un tableau
; .carousel("prev") : Revenir à l'image précédente
.carousel("next")：Image suivante

Ce qui précède est une introduction détaillée au carrousel d'images javascript. J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.