javascript - 原生js輪播圖
PHPz
PHPz 2017-05-18 10:46:20
0
4
1091

最近在搗鼓原生js輪播圖

我給切換加了transition 所以最後一張到第一張有很大的銜接問題。

想法是最後一張圖片後面append第一張圖片,然後父元素remove第一張圖片

1231這樣思路

請問有沒有大神寫過類似程式碼,可以參考下

PHPz
PHPz

学习是最好的投资!

全部回覆(4)
过去多啦不再A梦

我做過一個,參考了色魔張大媽的邏輯。

排列是:1 2 3 4 5 1

最後一張過渡到第一張,顯示的是最後那個1。因為是順序的,所以滑動如絲般順滑。

關鍵:5到1之後,直接復原 width: 0,此時又變成初始狀態,因為顯示的都是1所以幾乎無破綻。

我也嘗試過每滑過一幅就把它挪到隊尾去,但是實現起來太麻煩而作罷。

小葫芦

不用remove,直接append一個已經存在的節點就是移動。然後就是改變滾動條了。

给我你的怀抱

https://github.com/cubiq/Swip...
我的第一個slider是參考這個的,IScroll的作者寫的

大家讲道理

不需要那樣,而且dom節點的操作越少越好, 例如你用這樣一個排列順序5 1 2 3 4 5 1,
當往右從5滾動到1的時候,在動畫完成的瞬間,消除有transition的class,將位置重新調整到第一個1,然後把帶有transition的class重新賦值, 往左從1 到5 也是一樣。 原理就是利用視覺欺騙,因為第一個2 和 右邊5後面的那個1 的樣式一樣,沒有差別,所以可以達到目的。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板