javascript - div 캐러셀 문제

Question

세 개의 수직 p에 해당하는 세 개의 버튼이 순서대로 배열되어 있습니다. 두 번째 p의 버튼을 클릭하면 두 번째 p가 첫 번째 p의 위치로 슬라이드되고 세 번째 p가 두 번째 p의 위치로 슬라이드됩니다. 첫 번째 p를 아래쪽으로 밉니다. 세 개의 p가 모두 동시에 표시됩니다.
개인적으로는 캐러셀 문제라고 생각하는데, 약간의 차이가 있으니 조언 부탁드려요

코드는 다음과 같습니다. 기본적인 기능은 구현이 가능하지만 슬라이딩 효과는 어떻게 하면 다 위로 미끄러지는데, 쓰기가 번거로운 것 같은데 수정사항은 없나요

$(문서).ready(함수(){

으아악

});

<p style="너비: 500px;높이: 400px;테두리: 1px 단색 검정;">

으아악

Answer 1

실제로는 생각보다 훨씬 간단합니다. 슬라이딩 그림은 실제로 이미 순서대로 배열되어 있으며, 일반적인 CSS는

입니다. 으아악

그러나 동시에 모든 사진에 대해 슬라이딩 후 다음 순간에 해당하는 CSS 위치를 설정하고 트리거되면 원하는 효과를 얻을 수 있습니다

Answer 2

정렬 문제입니다. 클래스 이름을 p로 변경하는 방법을 결정하려면 어떤 p를 클릭하면 됩니다. 전환을 사용하면 원활하게 전환됩니다.