The coolest web learning, how to do a carousel

These days refer to the coolest net to do a H5 scene application case, a little harvest.

The coolest application case on the web is basically a routine (after all, it's auto-generated), with multiple <section> written under a <article> tag, each section represents a display page, and when you click the next page/previous page button or swipe up and down to display the page, Through the JS call and CSS3 implementation of the display page switching and animation implementation.

The key to implementation is the implementation of the page switching effect

About the page transition effect

The coolest Web:

　　

Picture carousel:

　　

Can see the display page is a smooth transition, you can use transition to achieve, there are 2 ways to realize

The first correspondence is to place the previous page on the Display page and the next page in front of the display page on the bottom/left to the right, the rest of the page is placed in another storage area, set Overflow:hidden to make it invisible; When you click on the next page, the page being displayed moves to the bottom, Originally in the top of the page moved to the display area, the original page moved to the storage area, and then from the storage area to take a page to the top, the wind wheel flow.

　　

If this is not the case, it will not be possible to achieve a sliding slide transition effect, similar to the previous page, you can control the page position by transform:translate or top, left, etc.

　　

The second is to set a very large Div,width property set to all display pages of the sum, set the Display page Float:left properties, by JS change large div margin-left or left property implementation to show different pages

There's another kind of carousel that's a form of fading out.

This is best achieved by putting all the display pages (set Position:absolute property) together, setting the Transition property, and setting the Opacity property by JS

　　

In addition, the automatic rotation of the carousel can be achieved through the settimeout, and some of the carousel with small navigation, such as:

This can be done by listening to the MouseOver event in the navigation bar to get the corresponding display page information.

　　

Code implementation: Http://pan.baidu.com/s/1i328qHn

The coolest web learning, how to do a carousel