鍍金池/ 問(wèn)答/Linux  HTML  Office/ vue+element使用走馬燈carousel輪播圖效果,兩張圖片是切換樣式不

vue+element使用走馬燈carousel輪播圖效果,兩張圖片是切換樣式不對(duì)

如題,當(dāng)走馬燈只有兩張圖片是。我點(diǎn)擊第一張圖,點(diǎn)擊右側(cè)的切換,切換到第二張圖(沒(méi)問(wèn)題),再次點(diǎn)擊右側(cè)切換,切換到第一張圖(有問(wèn)題?。?,第一次切換時(shí)動(dòng)畫效果是右滑,第二次切換時(shí)變成了左滑

回答
編輯回答
凝雅

正?,F(xiàn)象,因?yàn)槟愕膱D片列表已經(jīng)到達(dá)最右邊了,再右移,會(huì)移回第一個(gè),現(xiàn)象就是跟之前相反的動(dòng)畫方向;
思路就是

1、在最后一張圖后邊再放一張第一張的圖
2、在第一張圖前邊放本來(lái)的最后一張的圖;
3、最前和最后的移動(dòng)動(dòng)畫完成后,js不用動(dòng)畫移動(dòng)到中間對(duì)應(yīng)的位置;

示例:

 1、三張圖1,2,3,改為3',1,2,3,1',其中3'等于3,1'等于1; 
 2、動(dòng)畫移動(dòng)到1'后,js立刻定位到1,這時(shí)注意不要?jiǎng)赢嫞? 3、同理動(dòng)畫移動(dòng)到3'后,js立刻定位到3,這時(shí)注意不要?jiǎng)赢嫞?/code>

這樣效果就是始終一個(gè)方向輪播了;

2017年4月2日 06:20