Stacked album effect for PC and mobile-compatible

On the phone side, the stacking effect of the album is a more common way to display a picture, each person's ideas may be some different, the way to achieve different.

This blog is mainly to share my implementation of the method. Welcome all suggestions, point out my shortcomings, first 3Q ~

Let's take a look at the last:

Thinking and Principle analysis:

1, the first is the layout of the problem. By default, five misplaced images are displayed, and the rest of the pictures are obscured by the fifth picture behind. The dislocation is using the Transform property of the CSS3, using the Rotate property value. Perform a different rotation on the displayed five images.

2, JS implementation of the problem.

(1) Infer the mobile end and the PC side. Compatible with mouse events or touch events

(2) sliding motion, adding sliding distance inference, valid within a certain range

(3) Image switch. The first slide is moved to the end of the picture queue, and the loop is displayed. In this process, it is only the value of index that needs attention. and animations that show and disappear

Through the above analysis, this stacked album is not difficult to achieve, easy implementation.

For later convenience, combined with JQ. Written into the plugin form of jquery. Finally, you can use the DOM to bind the plugin's function.

Code for the entire project: Http://pan.baidu.com/s/1bnfMhAZ

The detailed code is not posted, can be downloaded after the code to view.

Code is based on the above ideas to achieve.

Stacked album effect for PC and mobile-compatible