Bootstrap3 to make picture carousel effect _javascript Skill

First look at the bootstrap picture Carousel effect:

The above is for everyone to share the effect, but this is NetEase Cloud Music's homepage.

The effect is to remember that Android was added to the view in a version of iOS7 's official control library first, and the design was universal. BOOTSTRAP3 also supports the use of this effect on the web.

The following is a simple analysis:

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 >

Second, the 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 CLA ss= "Carousel-inner" role= "ListBox" > <div class= "Item Active" >  <div class= "c Arousel-caption "> </div> </div> <div class=" Item ">  <div class= "Carousel-caption" > </div> </div> ... </div> <!--Controls--> <a class= "L EFT Carousel-control "href=" #carousel-example-generic "role=" button "data-slide=" prev "> <span class=" Glyphicon Glyphicon-chevron-left "></span> &Lt;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 smaller point below. That's the indicator.

ol class= "Carousel-indicators" class is used to create this indicator

Each data-slide-to= "0" attribute is used to direct location class= "Active" to define the default activation state
Item

<div class= "Item" >
 
 <div class=" carousel-caption ">
 
 
 

No suspense is every project, fill in the picture title and content is good

2. Left and right controller
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>

Manipulating in JavaScript

Class

$ ('. Carousel '). Carousel ({
 interval:2000
})

To cycle

. Carousel (' Cycle ')

Time out

. Carousel (' pause ')

Navigate to a specific item starting from 0

. Carousel (number)

Previous one

. Carousel (' prev ')

Next

. Carousel (' Next ')

More about Bootstrap You can also refer to the topic of learning: "Bootstrap learning course"

The above is for JavaScript picture Carousel For detailed introduction, I hope this article for you to learn JavaScript programming help.