CSS3輪播圖
CSS3動(dòng)畫可開(kāi)啟GPU硬件加速渲染動(dòng)畫, 因此效果更加流暢, 幀數(shù)更高, 但是很難判斷和控制動(dòng)畫的狀態(tài)速客。為了實(shí)現(xiàn)無(wú)縫輪播, 需要:
- 在圖片組最后再放置一張首張圖片, 當(dāng)焦點(diǎn)于最后一張的時(shí)候仍然可以滑動(dòng)到重復(fù)放置的第一張圖, 此刻又立刻切換到實(shí)際的第一張圖, 造成無(wú)縫的視覺(jué)侧啼。
- 對(duì)于切換到第一張重點(diǎn)需要用到事件監(jiān)聽(tīng), 通過(guò)監(jiān)聽(tīng)transitionend的事件, 可以在不占用定時(shí)器的次數(shù)的前提下, 于定時(shí)器的外部進(jìn)行無(wú)動(dòng)畫無(wú)過(guò)度地改變動(dòng)畫對(duì)象的變型(transform)。 以此來(lái)實(shí)現(xiàn)css3的無(wú)縫輪播悟民。
純JS輪播圖
動(dòng)畫可控性更好, 但是cpu占用大, 動(dòng)畫幀數(shù)低。
- 原理同樣需要在圖片組最后放置第一張圖實(shí)現(xiàn)無(wú)縫的視覺(jué)。
- 難點(diǎn): 關(guān)于math.ceil()和math.floor()兩個(gè)方法的使用, 在負(fù)值的時(shí)候要取整取更小的值, 而正值的時(shí)候需要取更大的整數(shù), 意味著取整都要讓位移最大化, 最后才能走完目標(biāo)距離, 否則, 永遠(yuǎn)無(wú)法到達(dá)目標(biāo)距離雕憔。
- 盡量以setTimeout和遞歸來(lái)代替setInterval, 因?yàn)閟etTimeou可以每次釋放內(nèi)存, 而setInterval會(huì)一直占用資源, 直到其被清除。
選項(xiàng)卡
- 如果直接對(duì)每個(gè)li標(biāo)簽進(jìn)行遍歷綁定事件, 會(huì)消耗內(nèi)存, 影響性能. 而使用事件委托的方法, 讓標(biāo)簽被點(diǎn)擊之后才觸發(fā)事件的綁定和回調(diào)相應(yīng)的函數(shù)可以節(jié)省更多的內(nèi)存糖声。
- 在遍歷的時(shí)候使用let變量可以打印每次的i值, 而使用var變量只會(huì)輸出最后一個(gè)i的值斤彼。
布局
- 雖然使用table屬性的結(jié)構(gòu)布局更加簡(jiǎn)單, 上手快, 但是實(shí)際上加載速度慢, 占用更多的資源。
