Comprehensive analysis of Bootstrap image carousel effect_javascript skills

1. Structural analysis

A carousel image mainly consists of three parts:

　☑ Carousel of pictures

　☑ Counter for carousel pictures

　☑ Controller for carousel pictures

Step one: Design a container for carousel images. Use the carousel style in the Bootstrap framework, and define an ID value for this container, so that the data attribute can be used to declare the trigger later.

Copy code The code is as follows:

Step 2: Design a carousel image counter. Add a carousel picture calculator inside the container div.carousel, using the carousel-indicators style. Its main function is to display the playback order of the current pictures (if there are several pictures, place several li's). It is generally made using a sequential list:

<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>

Step 3: Design the carousel image playback area. In the entire effect of carousel images, the playback area is the most critical area. This area is mainly used to place images that need to be rotated. This area is controlled using the carousel-inner style, and is also placed within the carousel container, and each carousel image is placed through the item container:

<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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 </div>
 </div>
</div>　

Step 4: Set carousel image description. Many carousel image effects also have their own titles and descriptions for each image. In fact, Carousel in the Bootstrap framework also provides similar effects. Just add the corresponding code at the bottom of the image in item.

<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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

Step 5: Design the carousel image controller. Many times carousels also have a forward and backward controller. This is achieved in Carousel through the carousel-control style combined with left and right. Among them, left means playing forward and right means playing backward. It is also placed in the carousel container:

<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. Declarative touch carousel image playback (no JS required)

<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  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Comprehensive analysis of Bootstrap image carousel effect_javascript skills" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Comprehensive analysis of Bootstrap image carousel effect_javascript skills" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201512/201512392831189.jpg&#63;201511392841?x-oss-process=image/resize,p_40"  class="lazy"    style="max-width:90%" alt="Comprehensive analysis of Bootstrap image carousel effect_javascript skills" ></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题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>

The declarative approach is achieved by defining the data attribute, which can easily control the position of the carousel. It mainly includes the following types:
　1. data-ride attribute: take the value carousel and define it on carousel.
2. Data-target attribute: The value is the ID name or other style identifier defined by carousel. As shown in the previous example, the value is "#slidershow", and it is defined on each li of the carousel counter.
3. data-slide attribute: The value includes prev, next, prev means scrolling backward, and next means scrolling forward. This attribute value is also defined on the a link of the carousel controller, and the href value of the controller is set to the container. 4. The ID name of the carousel or other style identifier.
4. data-slide-to attribute: used to pass the subscript of a certain frame, such as data-slide-to="2", which can jump directly to the specified frame (the subscript starts from 0), the same definition on each li of the carousel counter.
It should be noted here that you can add a slide style to the #slidershow layer, and use pictures and picture switching effects to have a smooth feeling.

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

In addition to data-ride="carousel", data-slide, and data-slide-to, the carousel component also supports three other custom attributes:

The following code implements "carousel without continuous loop" and "carousel time interval is 1 second".

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

3. JavaScript trigger method image carousel
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="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题1</h3>
 <p>描述内容1...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题2</h3>
 <p>描述内容2...</p>
 </div>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy" alt=""></a>
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题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");
 });
 });

Specific parameters can be set in the carousel() method, such as:

When using it, you can pass related parameters when initializing the plug-in, such as:

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

The carousel plug-in in the Bootstrap framework also provides users with several special calling methods. The brief description is as follows:

.carousel("cycle"): loop playback from left to right;
.carousel("pause"): Stop loop playback;
.carousel("number"): Loop to the specified frame, the subscript starts from 0, similar to an array;
.carousel("prev"): Return to the previous frame;
.carousel("next")：Next frame

The above is a detailed introduction to javascript image carousel. I hope this article will be helpful to everyone in learning javascript programming.