javascript - problème de carrousel div

Question

Trois boutons, correspondant à trois p verticaux disposés dans l'ordre. Cliquez sur le bouton du deuxième p, le deuxième p glissera vers la position du premier p, et le troisième p glissera vers la position du deuxième p. Faites glisser le premier p vers le bas. Les trois p sont affichés en même temps.
Personnellement, je pense qu'il s'agit d'un problème de carrousel, mais il y a quelques différences, merci de me donner quelques conseils

Voici le code. Les fonctions de base peuvent être implémentées, mais comment faire l'effet de glissement ? Tout glisse vers le haut, et j'ai l'impression que c'est fastidieux à écrire. Avez-vous des suggestions de modifications

.

$(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="largeur : 500px;hauteur : 400px;bordure : 1px noir uni;">

        <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

C'est en fait beaucoup plus simple que vous ne le pensez. Les images coulissantes sont en fait déjà disposées dans un ordre prédéterminé, en attendant que votre CSS change. Les images courantes incluent

.

transform: translateX(xxxx)

Mais en même temps, définissez la position CSS correspondant au moment suivant après le glissement pour toutes les images, puis une fois déclenchée, vous pouvez obtenir l'effet souhaité

Answer 2

C'est un problème de tri. Cliquez simplement sur quel p pour déterminer comment changer le nom de la classe en p. Utilisez simplement transition pour effectuer une transition en douceur

.