Bootstrap3 creates image carousel effects,

Bootstrap3 creates image carousel effects,

Let's take a look at the Bootstrap image carousel effect:

The above is the effect shared for everyone, but this is the homepage of Netease cloud music.

In this way, we can remember that android added this view to a specific version after it first appeared in the official ios7 control library. The design is generic .. bootstrap3 also supports this effect in the web.

The following is a simple analysis:

I. Structure Analysis

A carousel image consists of three parts:

☑Carousel Images

☑Carousel image counters

☑Controller for carousel Images

Step 1:Design the container for carousel images. In the Bootstrap framework, the carousel style is used and an ID value is defined for the container to facilitate the Declaration and triggering using the data attribute later.

Copy codeThe Code is as follows: <div id = "slidershow" class = "carousel"> </div>
Step 2:Design the carousel image counter. In the container div. the carousel image calculator is added to the caster usel-indicators. Its main function is to display the playing sequence of the current image (several pictures are placed in li ), the following table lists are used to create a sequence:

<Div id = "slidershow" class = "carousel"> <! -- Set the sequence of image 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 play area. The playing area is the most critical area in the overall effect of a carousel image. This area is mainly used to place images that require carousel. This area is controlled using the movie usel-inner style, and it is also placed in the movie usel container, and each carousel image is placed through the item container:

<Div id = "slidershow" class = "carousel"> <! -- Set the sequence of image carousel --> <ol class = "carousel-indicators"> <li class = "active"> 1 </li>... </Ol> <! -- Set carousel pictures --> <div class = "carousel-inner"> <div class = "item active"> <a href = "#">  </a> </div> <div class =" item "> <a href =" # ">  </a> </div>... <Div class = "item"> <a href = "#">  </a> </div> </div>

Step 4:Set the carousel image description. There are many carousel image effects, and each image should have its own title and description content. In fact, the Bootstrap framework also provides similar results. You only need to add the corresponding code at the bottom of the image in item.

<Div id = "slidershow" class = "carousel"> <! -- Set the sequence of image carousel --> <ol class = "carousel-indicators"> <li class = "active"> 1 </li>... </Ol> <! -- Set carousel pictures --> <div class = "carousel-inner"> <div class = "item active"> <a href = "#">  </a> <! -- The title and description of the image --> <div class = "carousel-caption"> 
Step 5:Design the carousel image controller. In many cases, carousel images also have a controller for forward and backward playback. In Carousel, the carousel-control style is used in combination with left and right. Left indicates forward playback, and right indicates backward playback. It is also placed in the container usel:

<Div id = "slidershow" class = "carousel"> <! -- Set the sequence of image carousel --> <ol class = "carousel-indicators">... </Ol> <! -- Set carousel images --> <div class = "carousel-inner">... </Div> <! -- Set the carousel image Controller --> <a class = "left carousel-control" href = ""> <span class = "glyphicon-chevron-left"> </span> </a> <a class = "right carousel-control" href = ""> <span class = "glyphicon-chevron-right"> </span> </a> </div>
II. Implementation Process

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active">  <div class="carousel-caption"> ... </div> </div> <div class="item">  <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a></div>
Divided into three parts
1. Indicator
One part is the following small dot... is the indicator


Ol class = "carousel-indicators" class is used to create this indicator

Each data-slide-to = "0" attribute is used to guide the position class = "active" to define the default activation status.
Item

<div class="item">  <div class="carousel-caption"> 
No suspense is that every project is filled with images.QuestionAndContentGood.
2. Left and Right Controllers
The Code is as follows:
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
Operate in javascript

Initialization
$('.carousel').carousel({ interval: 2000})
Loop
. Carousel ('cycle ')

Pause
. Usel ('pause ')
Locate a specific item from 0
. Carousel (number)
Previous
. Cancusel ('prev ')
Next
. Carousel ('Next ')
For more information about Bootstrap, refer to the topic for more information:Bootstrap learning tutorial
The above is a detailed introduction to javascript image carousel. I hope this article will help you learn javascript programming.