javascript - image display scrolling problem

Question

Such as pictures, part of screenshots, these pictures are all in a ul, if there are 25 pictures. The initial screen displays 10 pictures. When the more button is clicked, all 10 pictures scroll up and are hidden. Scroll down from below are 10 pictures. Only 10 pictures can be displayed at a time. Click again and 5 pictures will be displayed. Finally click to return to the initial state. How to achieve this effect? Please explain it to everyone. No idea

Answer 1

First control the parent container position:relative,top:0,left:0,transition:all .5

First clickMinus the height of ten pictures

The second clickminus the height of twenty pictures

......

Others are the same

Last time: top:0

Answer 2

Is it the kind of four-picture carousel? Principle

Answer 3

The correct answer upstairs is that carousels generally follow this idea. First, the parent is beyond hiding, and then just keep adjusting the height and it will be ok

Answer 4

Correct answer upstairs, this is the idea for general carousels. In addition, the animation effect of CSS is also good. It is also recommended to use js jq animation to write it for a better experience