三個按鈕,對應三個垂直的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>
其實比你想的簡單的多,滑動的圖片其實已經排列好的順序位置,等待你的css變化而變化,常見有
但是同時對所有的圖片設定滑動後的下一刻對應的css位置,然後觸發的時候 就能達到你要的效果了
就是一個排序問題 點選第幾個p來判斷給p更換class類別名稱 在使用transition做平滑過渡就行了