Comprehensive analysis of bootstrap picture carousel effect _javascript Skills

One. Structural analysis

A carousel picture consists of three main parts:

Picture of ☑ Carousel

☑ the counter of a carousel picture

☑ the controller of a carousel picture

First step: Design the container for the carousel picture. Using the carousel style in the Bootstrap framework and defining an ID value for the container, it is convenient to use the Data property to declare the trigger later.

Copy Code code as follows:

<div id= "Slidershow" class= "Carousel" ></div>

Step Two:Design a carousel picture counter. Add a carousel Picture calculator inside the container Div.carousel, using the carousel-indicators style, its main function is to display the current picture's playback order (there are several pictures to put a few li), generally using a shun list to make:

<div id= "Slidershow" class= "Carousel" >
<!--set the order of picture rotations--> <ol class=
 "Carousel-indicators" >
 <li class= "active" >1</li>
 <li>2</li>
 <li>3</li>
 <li >4</li>
 <li>5</li></ol>
</div>

Step Three: design the carousel picture playback area. In the overall effect of a carousel graph, the playback area is the most critical area, and this area is used primarily for placing pictures that require a carousel. This area is controlled using the Carousel-inner style, and it is also placed in the Carousel container, and the item container is used to place each carousel Picture:

<div id= "Slidershow" class= "Carousel" >
 <!--set the order of picture rotations--> <ol class=
 "Carousel-indicators" >
 <li class= "active" >1</li>
 ...
 </ol>
 <!--set Carousel picture-->
 <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>
</div>

Fourth Step: Set the Carousel picture description. Many carousel picture effects, in each picture also should have their own title and description content. In fact, the carousel in the Bootstrap Framework also provides similar results. Just add the corresponding code to the bottom of the picture in item.

<div id= "Slidershow" class= "Carousel" >
 <!--set the order of picture rotations--> <ol class=
 "Carousel-indicators" >
 <li class= "active" >1</li>
 ...
 </ol>
 <!--set Carousel picture-->
 <div class= "Carousel-inner" >
 <div class= "Item Active" >
 <a href= "# #" ></a>
 <!--picture corresponding title and description content-->
 <div class= "carousel-caption" >
  
 

Fifth Step: Design the carousel picture Controller. Many times the carousel picture also has a controller that plays forwards and backwards. Implemented in carousel with left and right through the Carousel-control style. Where left represents playback forward and right indicates playback backwards. It is also placed in the Carousel container:

<div id= "Slidershow" class= "Carousel" >
 <!--set the order of picture rotations--> <ol class=
 "Carousel-indicators" > ...
 </ol>
 <!--set the carousel picture-->
 <div class= "Carousel-inner" >
 ...
 </div>
 <!--set up the carousel picture controller-->
 <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 >

Two. Announce the playback of the touch-carousel (no JS required)

<div id= "Slidershow" class= "Carousel Slide" data-ride= "Carousel" > <!--Set the order of picture rotations--> <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> <!--set up the carousel picture--> <div class= "Carousel-inner" > <div class= "Item Active" > <a href= "# #" &G T;</a> <div class= "carousel-caption" >  

Declarative methods are implemented by defining the data property, which can easily control the location of the carousel. It mainly includes the following kinds:
1. Data-ride property: Takes the value carousel and defines it on the carousel.
2. Data-target property: The ID name or other style qualifier defined by the value carousel, as shown in the previous example, with the value "#slidershow" and defined on each Li of the carousel counter.
3. Data-slide Property: value includes prev,next,prev for backward scrolling, next for forward scrolling. The property value is also defined on the a link on the wheel map controller, while the controller href value is set to container 4. The ID name of the carousel or other style qualifier.
4. Data-slide-to property: The subscript that is used to pass a frame, such as data-slide-to= "2", can jump directly to the specified frame (subscript starting at 0), also defined on each Li of the carousel counter.
Here you need to note that you can add a slide style to the #slidershow layer, and use pictures and pictures to change the effect has 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 properties:

The following code implements the "round robin Cycle" and the "1-second" carousel interval.

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

Three. JavaScript Trigger method Picture Carousel
HTML:

<div id= "Slidershow" class= "Carousel Slide" > <!--Set the order of the picture Carousel--> <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> <!--set Carousel picture--> <div class= "Carousel-inner" > <div class= "Item Active" > <a href= "# #" ></a> <div class= "Carousel-caption" >  

Js:

 $ (function () {
 $ ("#slidershow"). Carousel ({
 interval:2000
 });
 $ ("#slidershow a.left"). Click (function () {
 $ (". Carousel"). Carousel ("prev"
 ); $ ("#slidershow a.right"). Click (function () {
 $ (". Carousel"). Carousel ("Next");
 });
 

You can set specific parameters in the Carousel () method, such as:

When used, the associated parameters can be passed off when the plug-in is initialized, such as:

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

The Carousel plug-in in the Bootstrap framework also provides several special invocation methods for the user, briefly described below:

. Carousel ("cycle"): loop playback from left to right;
. Carousel ("Pause"): Stop loop playback;
. Carousel ("number"): Loops to the specified frame, subscript starting from 0, similar to an array;
. Carousel ("prev"): Returns to the previous frame;
. Carousel ("Next"): Next Frame

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

Above is a detailed introduction to JavaScript image Carousel, I hope this article will help you learn JavaScript program design.