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做平滑过渡就行了