javascript - div輪播問題

Question

三個按鈕，對應三個垂直的p順序排列，點擊第二個p的按鈕，第二個p滑動到第一個p的位置，第三個p滑動到第二個p的位置。第一個p滑到最下面。三個p都是同時顯示。
個人覺得這個是輪播的問題，但也有些不同，請大家指教

#下面是程式碼。已經可以實現基本的功能，但是滑動效果怎麼弄，都是向上滑動的、還有感覺自己寫的繁瑣，有什麼修改建議麼

$(document).ready(function(){

    $(".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="width: 500px;height: 400px;border: 1px solid black;">

        <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

其實比你想的簡單的多，滑動的圖片其實已經排列好的順序位置，等待你的css變化而變化，常見有

transform: translateX(xxxx)

但是同時對所有的圖片設定滑動後的下一刻對應的css位置，然後觸發的時候 就能達到你要的效果了

Answer 2

就是一個排序問題 點選第幾個p來判斷給p更換class類別名稱 在使用transition做平滑過渡就行了