JavaScript - 画像表示のスクロールの問題

Question

写真、スクリーンショットの一部など、25 枚の写真がある場合、これらの写真はすべて UL に含まれます。初期画面では10枚の写真が表示されますが、詳細ボタンをクリックすると10枚すべてが上にスクロールして非表示になります。下にスクロールすると10枚の写真があります。一度に表示できる画像は 10 枚までです。もう一度クリックすると5枚の写真が表示されます。最後にクリックすると初期状態に戻ります。この効果を実現するにはどうすればよいですか?皆さんに説明してください。わかりません

Answer 1

まず親コンテナのposition:relative,top:0,left:0,transition:all .5を制御します

ファーストクリック写真10枚の高さをマイナスしてください

2番目のクリック20枚の写真の高さを引いたもの

......

他も同様

前回: トップ:0

Answer 2

それは 4 枚の写真のカルーセルのようなものですか?原則

Answer 3

2 階の正解は、カルーセルは一般的にこの考えに従っているということです。まず、親が隠れなくなり、その後は高さを調整し続けるだけで問題ありません。

Answer 4

上の階の正解は、一般的なカルーセルがこのアイデアに従っており、CSS のアニメーション効果も優れており、より良いエクスペリエンスを提供するため、js jq アニメーションを使用して記述することをお勧めします。