縦 3 つの p に対応する 3 つのボタンが順番に配置されており、2 番目の p のボタンをクリックすると、2 番目の p が 1 番目の p の位置にスライドし、3 番目の p が 2 番目の p の位置にスライドします。 p.最初の p を下にスライドさせます。 3 つの p がすべて同時に表示されます。
個人的には、これはカルーセルの問題だと思いますが、いくつかの違いがあります。アドバイスをお願いします。
以下はコードです。基本的な機能は実現できるのですが、スライド効果をどう出すか? 全て上にスライドしてしまい、書くのが面倒に感じます。修正案はありますか?
$(ドキュメント).ready(function(){
リーリー});
<p style="幅: 500px;高さ: 400px;ボーダー: 1px 黒一色;">
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
実際には、スライド画像はあらかじめ決められた順序で配置されており、一般的なものには
が変更されるのを待っています。 リーリー同時に、すべての写真のスライド後の次の瞬間に対応する CSS 位置を設定し、トリガーされると、希望する効果を実現できます
どの p をクリックしてクラス名を p に変更するかを決めるだけの問題です。スムーズに遷移するには、transition を使用するだけです。