Stack album effects, compatible with PC and mobile

On the phone side, the stacked effect of the album is a more common way to display pictures, everyone's ideas may be some different, the way to achieve different.

This blog is mainly to share my implementation of the method, you are welcome to make suggestions, point out my shortcomings, first 3Q ~

Let's look at the final:

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. Dislocation uses the transform attribute of the CSS3, using the Rotate attribute value to perform a different rotation on the displayed five images.

2, JS implementation of the problem.

(1) Determine the mobile and PC side, compatible with the use of mouse events or touch events

(2) Slide action, add sliding distance to judge, in a range of effective

(3) Picture switch, the first slide to move to the end of the picture queue, the loop display, the process, you need to be aware of the value of the index, as well as the display and disappearance of the animation

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

For later convenience, combined with JQ, written in the form of jquery plug-in, and finally use the DOM binding the plug-in function.

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

The specific code is not posted, you can download the code after the review. Code is based on the above ideas to achieve.

Stack album effects, compatible with PC and mobile