JavaScript - div カルーセルの問題

Question

縦 3 つの p に対応する 3 つのボタンが順番に配置されており、2 番目の p のボタンをクリックすると、2 番目の p が 1 番目の p の位置にスライドし、3 番目の p が 2 番目の p の位置にスライドします。 p.最初の p を下にスライドさせます。 3 つの p がすべて同時に表示されます。
個人的には、これはカルーセルの問題だと思いますが、いくつかの違いがあります。アドバイスをお願いします。

以下はコードです。基本的な機能は実現できるのですが、スライド効果をどう出すか? 全て上にスライドしてしまい、書くのが面倒に感じます。修正案はありますか?

$(ドキュメント).ready(function(){

リーリー

});

<p style="幅: 500px;高さ: 400px;ボーダー: 1px 黒一色;">

リーリー

Answer 1

実際には、スライド画像はあらかじめ決められた順序で配置されており、一般的なものには

が変更されるのを待っています。 リーリー

同時に、すべての写真のスライド後の次の瞬間に対応する CSS 位置を設定し、トリガーされると、希望する効果を実現できます

Answer 2

どの p をクリックしてクラス名を p に変更するかを決めるだけの問題です。スムーズに遷移するには、transition を使用するだけです。