Javascript – Div-Karussell-Problem

Question

Drei Schaltflächen, entsprechend drei vertikal angeordneten Ps. Klicken Sie auf die Schaltfläche des zweiten P, das zweite P wird an die Position des ersten P verschoben und das dritte P wird an die Position des zweiten P verschoben. Schieben Sie das erste p nach unten. Alle drei P's werden gleichzeitig angezeigt.
Persönlich denke ich, dass es sich um ein Karussellproblem handelt, aber es gibt einige Unterschiede, bitte geben Sie mir einen Rat

Hier ist der Code. Die Grundfunktionen können implementiert werden, aber wie lässt sich der Gleiteffekt erzielen? Ich finde, dass das Schreiben umständlich ist. Haben Sie Vorschläge für Änderungen?

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