摘要:昨天學(xué)習(xí)了輪播的原理,今天再來(lái)看看無(wú)縫輪播的技術(shù)。無(wú)縫輪播無(wú)縫輪播的原來(lái)大致類似小時(shí)候跳大繩,小朋友一個(gè)個(gè)進(jìn)入,一個(gè)個(gè)出來(lái),出來(lái)后排到隊(duì)伍末尾,等在著進(jìn)入,無(wú)縫輪播也類似這種機(jī)制。
昨天學(xué)習(xí)了輪播的原理,今天再來(lái)看看無(wú)縫輪播的技術(shù)。
昨天學(xué)習(xí)的輪播機(jī)制類似于走馬燈,所有圖片排成一排,輪流在你眼前走過(guò),你就會(huì)感覺(jué)他們動(dòng)起來(lái)了,今天學(xué)的無(wú)縫輪播就不能用昨天的思路了,它和昨天最大的區(qū)別是,從最后一張回到第一張是直接切換的,不是先回到第一張圖片的位置,然后再往后切換。
無(wú)縫輪播無(wú)縫輪播的原來(lái)大致類似小時(shí)候跳大繩,小朋友一個(gè)個(gè)進(jìn)入,一個(gè)個(gè)出來(lái),出來(lái)后排到隊(duì)伍末尾,等在著進(jìn)入,無(wú)縫輪播也類似這種機(jī)制。
用昨天的思路寫CSS,對(duì)圖片用display:flex布局,你會(huì)發(fā)現(xiàn)圖片永遠(yuǎn)是一字排開(kāi)的,第二張一直在第一張后面,當(dāng)你用transform: translateX(-100%)第一張往左移動(dòng),第二張的位置會(huì)受到影響,這樣就實(shí)現(xiàn)不了我們想要的效果;我們想要的效果是每張都是獨(dú)立,不能互相影響,所以這個(gè)CSS也不能這樣寫。
所以每張圖片應(yīng)該用絕對(duì)定位來(lái)實(shí)現(xiàn),那它的父元素就要用相對(duì)定位來(lái)做了
用JS 來(lái)控制圖片移動(dòng)的動(dòng)畫,當(dāng)png1 向左移動(dòng)時(shí),png2也要向左移動(dòng)(加上過(guò)渡動(dòng)畫),因?yàn)閮蓚€(gè)動(dòng)畫先后執(zhí)行時(shí)間過(guò)短,瀏覽器會(huì)默認(rèn)同時(shí)進(jìn)行,所以用setTimeout()設(shè)置一個(gè)定時(shí)器,在時(shí)間到后執(zhí)行一段代碼或者函數(shù)
setTimeout(function(){ $("#images > .png1").css({transform:"translateX(-100%)"}); //png1向左移動(dòng)100% $("#images > .png2").css({transform:"translateX(-100%)"}); //png2也向左移動(dòng)100% },3000) setTimeout(function{ $("#images > .png2").css({transform:"translateX(-200%)"}); //png2在向左移動(dòng)100%,這里就變成200% $("#images > .png3").css({transform:"translateX(-100%)"}); //png3也向左移動(dòng)100% },6000)
第一個(gè)定時(shí)器3s后執(zhí)行,png1 向左移動(dòng)同時(shí)png2 也在向左移動(dòng);第二定時(shí)器6s后執(zhí)行,png2 向左移動(dòng)的同時(shí)png3 也向左移動(dòng),這就實(shí)現(xiàn)了第一輪的輪播,那怎樣讓它循環(huán)播放呢?
在第一個(gè)定時(shí)器執(zhí)行的時(shí)候,png1 向左移動(dòng)后,在視窗的左邊,我們已經(jīng)讓它跑到視窗的右邊待命,讓png3 向左右的同時(shí)png1 也向左移動(dòng)。
setTimeout(function(){ $("#images > .png1").css({transform:"translateX(-100%)"}); $("#images > .png2").css({transform:"translateX(-100%)"}); $("#images > .png1").one("transitionend",function(e){ $(e.currentTarget).addClass("right").css({transform:"none"}) //當(dāng)png1動(dòng)畫執(zhí)行結(jié)束之后,給它添加一個(gè)class,讓它跑到右邊待命,這里面要把左移的css給干掉,不然它會(huì)一直在那里 }); },3000)
transitionend會(huì)在CSStransition動(dòng)畫結(jié)束后出發(fā)。
one處理函數(shù)在每個(gè)元素上每種事件類型最多執(zhí)行一次。
這里用on,你會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題,當(dāng)動(dòng)畫結(jié)束后,它就會(huì)把right給加上去,導(dǎo)致用于在右邊,所以這里要把on改成one。
整理下上面寫的代碼
上面代碼可以實(shí)現(xiàn)一輪播放,如果要一直循環(huán)下去,多加幾輪,或者用for循環(huán)去做。
本次用到了兩個(gè)新的API:
transitionend會(huì)在CSStransition動(dòng)畫結(jié)束后出發(fā)。
one處理函數(shù)在每個(gè)元素上每種事件類型最多執(zhí)行一次。
總結(jié):做無(wú)縫輪播的關(guān)鍵是隊(duì)列,圖片1動(dòng)作的同時(shí)圖片2也要?jiǎng)幼?,并且在?dòng)畫結(jié)束之后去圖片3后面待命,跟著圖片3一起動(dòng)作,就這樣一直循環(huán)下去,就能實(shí)現(xiàn)無(wú)縫輪播了。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/95146.html
摘要:無(wú)縫輪播的原理在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就如同無(wú)縫一般。 之前面試被問(wèn)到這個(gè)問(wèn)題,之前都是隨便找大神插件,知道怎么去做,但是一直沒(méi)實(shí)現(xiàn)過(guò)。 無(wú)縫輪播的原理 在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就...
摘要:無(wú)縫輪播的原理在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就如同無(wú)縫一般。 之前面試被問(wèn)到這個(gè)問(wèn)題,之前都是隨便找大神插件,知道怎么去做,但是一直沒(méi)實(shí)現(xiàn)過(guò)。 無(wú)縫輪播的原理 在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就...
摘要:無(wú)縫輪播的原理在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就如同無(wú)縫一般。 之前面試被問(wèn)到這個(gè)問(wèn)題,之前都是隨便找大神插件,知道怎么去做,但是一直沒(méi)實(shí)現(xiàn)過(guò)。 無(wú)縫輪播的原理 在滾動(dòng)層前后分別插入最后一個(gè)元素和最前面一個(gè)元素,然后在動(dòng)畫滾到最后或者最前的時(shí)候,初始化滾動(dòng)層的位置樣式,速度很快,無(wú)法察覺(jué),就...
摘要:無(wú)縫輪播工作中遇到輪播怎么辦千萬(wàn)不要自己寫輪播我們學(xué)這么多基礎(chǔ)是為了能夠看懂大神的代碼然后用大神的代碼因?yàn)槿绻约簩懸粋€(gè)輪播就可能出現(xiàn)各種各樣的如果是在工作中這樣做無(wú)異于浪費(fèi)自己的時(shí)間降低工作效率最好的方法是直接用大神寫好的源碼然后看使用文 無(wú)縫輪播 工作中遇到輪播怎么辦?千萬(wàn)不要自己寫輪播我們學(xué)這么多基礎(chǔ)是為了能夠看懂大神的代碼,然后用大神的代碼因?yàn)槿绻约簩?一個(gè)輪播,就可能出現(xiàn)各...
摘要:什么是輪播輪播,英文,也就是幻燈片的意思,我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。怎么實(shí)現(xiàn)一個(gè)輪播一般,我們可以兩種方法來(lái)實(shí)現(xiàn)輪播,例如,核心思路使用透明度來(lái)切換照片,使用距離來(lái)平移照片。 什么是輪播 輪播,英文slider,也就是幻燈片的意思,我們可以手動(dòng)或者自動(dòng)切換一張張的照片達(dá)到顯示的目的。各大電商網(wǎng)站都會(huì)使用輪播來(lái)展示商品,可以在相對(duì)較小的空間里,實(shí)現(xiàn)多種展示。 怎...
閱讀 2118·2021-11-05 09:42
閱讀 2861·2021-09-23 11:21
閱讀 2857·2019-08-30 14:00
閱讀 3323·2019-08-30 13:15
閱讀 471·2019-08-29 17:18
閱讀 3563·2019-08-29 16:29
閱讀 2761·2019-08-29 14:06
閱讀 2803·2019-08-23 14:41