Let’s take a look at the Bootstrap picture carousel effect:
The above is the effect shared by everyone, but this is the homepage of NetEase Cloud Music.
Remember to first appear in the official control library of ios7, and Android also added this view to a certain version. The design is universal..bootstrap3 also supports the use of such effects in the web.
Next, a simple analysis:
1. Structural Analysis
A carousel picture mainly includes three parts:
☑ Carousel pictures
☑ Counter for carousel pictures
☑ The controller for carousel pictures
Step 1: Design the container for carousel pictures. The carousel style is adopted in the Bootstrap framework, and an ID value is defined for this container, so that the data attribute is used to declare the trigger later.
Copy the code as follows:<div id="slidershow"></div>
Step 2: 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 playback order of the current picture (there are several pictures, and the following are the same lists are generally used to make it:
<div id="slidershow"><!-- Set the order of picture carousels--> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ol></div>
Step 3: Design the carousel picture playback area. In the entire effect of the carousel image, the playback area is the most critical area, which is mainly used to place pictures that need to be carouseled. This area is controlled using the carousel-inner style, and it is also placed in the carousel container, and each carousel image is placed through the item container:
<div id="slidershow"> <!-- Set the order of image carousels --> <ol> <li>1</li> … </ol> <!-- Set the carousel pictures --> <div> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"></a> </div> <div> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"></a> </div> … <div> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"></a> </div> … <div> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"></a> </div> </div></div>
Step 4: Set carousel picture description. Many carousel picture effects also have their own title and description content on each picture. In fact, Carousel in the Bootstrap framework also provides similar effects. Just add the corresponding code at the bottom of the image in the item.
<div id="slidershow"> <!-- Set the order of picture carousels --> <ol> <li>1</li> … </ol> <!-- Set the carousel pictures --> <div> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"></a> <!-- Picture corresponding title and description content--> <div> <h3>Image title</h3> <p>Description content...</p> </div> </div> … </div></div>
Step 5: Design the carousel picture controller. Many times carousel pictures also have a controller that plays forward and backward. In Carousel, it is achieved by combining left and right with carousel-control style. where left means forward playback, right means backward playback. It is also placed in the carousel container:
<div id="slidershow"> <!-- Set the order of picture carousels --> <ol> … </ol> <!-- Set the carousel pictures --> <div> … </div> <!-- Set the carousel picture controller --> <a href="" > <span></span> </a> <a href=""> <span></span> </a> </div>
2. Implementation process
<div id="carousel-example-generic" data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></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 role="listbox"> <div> <img src="..."> <div> ... </div> </div> <div> <img src="..."> <div> ... </div> </div> ... </div> ... </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span></span> <span>Next</span> </a></div>
Divided into three parts
1. Indicator
One part is the small dot below...is the indicator
The ol class is used to create this indicator
Each data-slide-to="0" attribute is used to guide the location to define the default activation state.
item
<div> <img src="..."> <div> <h3>...</h3> <p>...</p> </div></div>
There is no suspense, just fill in the title and content of the picture
2. Left and left controllers
The code is as follows
<a href="#myCarousel" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#myCarousel" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a>
Operation in javascript
initialization
$('.carousel').carousel({ interval: 2000})Carry out a loop
.carousel('cycle')
pause
.carousel('pause')
Positioning to a specific item starts from 0
.carousel(number)
The previous one
.carousel('prev')
Next
.carousel('next')
More content about Bootstrap can also be found in special topics: "Bootstrap Learning Tutorial"
The above is a detailed introduction to javascript picture carousel. I hope this article will be helpful to everyone in learning javascript programming.