資訊專欄INFORMATION COLUMN
摘要：昨天學(xué)習(xí)了輪播的原理，今天再來看看無縫輪播的技術(shù)。無縫輪播無縫輪播的原來大致類似小時候跳大繩，小朋友一個個進(jìn)入，一個個出來，出來后排到隊(duì)伍末尾，等在著進(jìn)入，無縫輪播也類似這種機(jī)制。
昨天學(xué)習(xí)了輪播的原理，今天再來看看無縫輪播的技術(shù)。
昨天學(xué)習(xí)的輪播機(jī)制類似于走馬燈，所有圖片排成一排，輪流在你眼前走過，你就會感覺他們動起來了，今天學(xué)的無縫輪播就不能用昨天的思路了，它和昨天最大的區(qū)別是，從最后一張回到第一張是直接切換的，不是先回到第一張圖片的位置，然后再往后切換。
無縫輪播無縫輪播的原來大致類似小時候跳大繩，小朋友一個個進(jìn)入，一個個出來，出來后排到隊(duì)伍末尾，等在著進(jìn)入，無縫輪播也類似這種機(jī)制。
用昨天的思路寫CSS，對圖片用display:flex布局，你會發(fā)現(xiàn)圖片永遠(yuǎn)是一字排開的，第二張一直在第一張后面，當(dāng)你用transform: translateX(-100%)第一張往左移動，第二張的位置會受到影響，這樣就實(shí)現(xiàn)不了我們想要的效果；我們想要的效果是每張都是獨(dú)立，不能互相影響，所以這個CSS也不能這樣寫。
所以每張圖片應(yīng)該用絕對定位來實(shí)現(xiàn)，那它的父元素就要用相對定位來做了
用JS 來控制圖片移動的動畫，當(dāng)png1 向左移動時，png2也要向左移動（加上過渡動畫），因?yàn)閮蓚€動畫先后執(zhí)行時間過短，瀏覽器會默認(rèn)同時進(jìn)行，所以用setTimeout()設(shè)置一個定時器，在時間到后執(zhí)行一段代碼或者函數(shù)
setTimeout(function(){
$("#images > .png1").css({transform:"translateX(-100%)"}); //png1向左移動100%
$("#images > .png2").css({transform:"translateX(-100%)"}); //png2也向左移動100%
},3000)
setTimeout(function{
$("#images > .png2").css({transform:"translateX(-200%)"}); //png2在向左移動100%，這里就變成200%
$("#images > .png3").css({transform:"translateX(-100%)"}); //png3也向左移動100%
},6000)
第一個定時器3s后執(zhí)行，png1 向左移動同時png2 也在向左移動；第二定時器6s后執(zhí)行，png2 向左移動的同時png3 也向左移動，這就實(shí)現(xiàn)了第一輪的輪播，那怎樣讓它循環(huán)播放呢？
在第一個定時器執(zhí)行的時候，png1 向左移動后，在視窗的左邊，我們已經(jīng)讓它跑到視窗的右邊待命，讓png3 向左右的同時png1 也向左移動。
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動畫執(zhí)行結(jié)束之后，給它添加一個class，讓它跑到右邊待命，這里面要把左移的css給干掉，不然它會一直在那里
});
},3000)
transitionend會在CSStransition動畫結(jié)束后出發(fā)。
one處理函數(shù)在每個元素上每種事件類型最多執(zhí)行一次。
這里用on，你會發(fā)現(xiàn)一個問題，當(dāng)動畫結(jié)束后，它就會把right給加上去，導(dǎo)致用于在右邊，所以這里要把on改成one。
整理下上面寫的代碼
上面代碼可以實(shí)現(xiàn)一輪播放，如果要一直循環(huán)下去，多加幾輪，或者用for循環(huán)去做。
本次用到了兩個新的API：
transitionend會在CSStransition動畫結(jié)束后出發(fā)。
one處理函數(shù)在每個元素上每種事件類型最多執(zhí)行一次。
總結(jié)：做無縫輪播的關(guān)鍵是隊(duì)列，圖片1動作的同時圖片2也要動作，并且在動畫結(jié)束之后去圖片3后面待命，跟著圖片3一起動作，就這樣一直循環(huán)下去，就能實(shí)現(xiàn)無縫輪播了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95146.html
摘要：無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就如同無縫一般。 之前面試被問到這個問題，之前都是隨便找大神插件，知道怎么去做，但是一直沒實(shí)現(xiàn)過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就...
摘要：無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就如同無縫一般。 之前面試被問到這個問題，之前都是隨便找大神插件，知道怎么去做，但是一直沒實(shí)現(xiàn)過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就...
摘要：無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就如同無縫一般。 之前面試被問到這個問題，之前都是隨便找大神插件，知道怎么去做，但是一直沒實(shí)現(xiàn)過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素，然后在動畫滾到最后或者最前的時候，初始化滾動層的位置樣式，速度很快，無法察覺，就...
閱讀 2312·2021-11-05 09:42
閱讀 3028·2021-09-23 11:21
閱讀 3005·2019-08-30 14:00
閱讀 3453·2019-08-30 13:15
閱讀 626·2019-08-29 17:18
閱讀 3692·2019-08-29 16:29
閱讀 2930·2019-08-29 14:06
閱讀 2944·2019-08-23 14:41
