国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

最近在搗鼓原生js輪播圖

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

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

1231這樣思路

請(qǐng)問(wèn)有沒(méi)有大神寫過(guò)類似程式碼,可以參考下

PHPz
PHPz

學(xué)習(xí)是最好的投資!

全部回覆(4)
過(guò)去多啦不再A夢(mèng)

我做過(guò)一個(gè),參考了色魔張大媽的邏輯。

排列是:1 2 3 4 5 1

最後一張過(guò)渡到第一張,顯示的是最後那個(gè)1。因?yàn)槭琼樞虻?,所以滑?dòng)如絲般順滑。

關(guān)鍵:5到1之後,直接復(fù)原 width: 0,此時(shí)又變成初始狀態(tài),因?yàn)轱@示的都是1所以幾乎無(wú)破綻。

我也嘗試過(guò)每滑過(guò)一幅就把它挪到隊(duì)尾去,但是實(shí)現(xiàn)起來(lái)太麻煩而作罷。

小葫蘆

不用remove,直接append一個(gè)已經(jīng)存在的節(jié)點(diǎn)就是移動(dòng)。然後就是改變滾動(dòng)條了。

給我你的懷抱

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

大家講道理

不需要那樣,而且dom節(jié)點(diǎn)的操作越少越好, 例如你用這樣一個(gè)排列順序5 1 2 3 4 5 1,
當(dāng)往右從5滾動(dòng)到1的時(shí)候,在動(dòng)畫完成的瞬間,消除有transition的class,將位置重新調(diào)整到第一個(gè)1,然後把帶有transition的class重新賦值, 往左從1 到5 也是一樣。 原理就是利用視覺(jué)欺騙,因?yàn)榈谝粋€(gè)2 和 右邊5後面的那個(gè)1 的樣式一樣,沒(méi)有差別,所以可以達(dá)到目的。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板