在別的網站上看到的css3 translated實現的無縫輪播圖，為什么4組圖片輪換的時候，要多寫兩個一樣的輪播容器呢？這是基于什么原理？？？
2 回答
互換的青春
TA貢獻1797條經驗 獲得超6個贊
無縫切換布局：
p4 1 2 3 4 p1 p4圖 和 序號4一模一樣 p1圖 和 序號1一模一樣
切換過程（點擊下一張按鈕）：
1
2
3
4
p1 // 結合上面的布局，這個時候已經是最后一張圖片了。
// 到這就是無縫切換的核心了：
// 正常過渡到 p1 后（有動畫效果），取消過渡效果的切換回 序號1（無動畫效果，瞬間切換回去）
// 順序就開始了輪回
1 <--------
2 |
3 ^
4 |
p1 ------->
因此才要這樣布局....
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
這是因為在播放到最后一張圖的時候需要拉回到最開始那張圖重新輪播，如果沒有那張重復的圖，給人的視覺就是直接到達第一張圖，沒有無縫輪播的效果，用了這張重復的圖之后，到了最后一張圖，給人視覺上的欺騙，直接拉回到那張重復的圖，用戶眼睛看到的是最后一張，實際上已經重新開始輪播了，這樣做到無縫滾動。
能看得明白嗎，描述的不是很清楚，希望能幫到你
- 2 回答
- 0 關注
- 1218 瀏覽
添加回答
舉報
0/150
提交
取消