javascript - isu karusel div

Question

Tiga butang, sepadan dengan tiga p menegak disusun mengikut urutan Klik butang p kedua, p kedua akan meluncur ke kedudukan p pertama, dan p ketiga akan meluncur ke kedudukan p kedua. Luncurkan p pertama ke bawah. Ketiga-tiga p dipaparkan pada masa yang sama.
Secara peribadi saya rasa ini adalah masalah karusel, tetapi terdapat beberapa perbezaan, sila beri saya nasihat

Ini kodnya. Fungsi asas boleh dilaksanakan, tetapi bagaimana untuk membuat kesan gelongsor itu semua meluncur ke atas, dan saya rasa sukar untuk menulis Adakah anda mempunyai sebarang cadangan untuk pengubahsuaian

$(dokumen).sedia(fungsi(){

    $(".p2btn").click(function(){
        $(".p2").css("transform","translateY(-100px)");
        $(".p3").css("transform","translateY(-100px)");
        $(".p1").css("transform","translateY(200px)")
});
    $(".p3btn").click(function(){
        $(".p2").css("transform","translateY(0px)");
        (".p3").css("transform","translateY(-200px)");
        $(".p1").css("transform","translateY(200px)");
});
    $(".p1btn").click(function () {
        $(".p2").css("transform","translateY(0px)");
        $(".p3").css("transform","translateY(0px)");
        $(".p1").css("transform","translateY(0px)");      
});

});

<p style="lebar: 500px;tinggi: 400px;sempadan: 1px hitam pejal;">

        <p style="float: left;width: 100px;height: 100%;border: 1px solid red;"> 
            <input class="p1btn" type="button" value="button1" />
            <input class="p2btn" type="button" value="button2" />
            <input class="p3btn" type="button" value="button3" />
        </p>
        
        <p style="float: left;width: 350px;height: 100%; margin-top: 30px;">
            <p class="p1" style="width: 350px;height: 100px;background-color:bisque;">
                1111
            </p>
        <p class="p2" style="width: 350px;height: 100px;backgroundcolor:blueviolet;">
            22222222
        </p>
        <p class="p3" style="width: 350px;height: 100px;background-color: green;">
                33333333
        </p>
    </p>
</p>

Answer 1

Ia sebenarnya lebih mudah daripada yang anda fikirkan. Gambar gelongsor sebenarnya sudah disusun mengikut urutan, menunggu css anda berubah

.

transform: translateX(xxxx)

Tetapi pada masa yang sama tetapkan kedudukan css sepadan dengan detik seterusnya selepas meluncur untuk semua gambar, dan kemudian apabila dicetuskan, anda boleh mencapai kesan yang anda mahukan

Answer 2

Ini masalah pengisihan Cuma klik pada p yang mana untuk menentukan cara menukar nama kelas kepada p. Hanya gunakan peralihan untuk membuat peralihan yang lancar