摘要:昨天學習了輪播的原理,今天再來看看無縫輪播的技術。無縫輪播無縫輪播的原來大致類似小時候跳大繩,小朋友一個個進入,一個個出來,出來后排到隊伍末尾,等在著進入,無縫輪播也類似這種機制。
昨天學習了輪播的原理,今天再來看看無縫輪播的技術。
昨天學習的輪播機制類似于走馬燈,所有圖片排成一排,輪流在你眼前走過,你就會感覺他們動起來了,今天學的無縫輪播就不能用昨天的思路了,它和昨天最大的區別是,從最后一張回到第一張是直接切換的,不是先回到第一張圖片的位置,然后再往后切換。
無縫輪播無縫輪播的原來大致類似小時候跳大繩,小朋友一個個進入,一個個出來,出來后排到隊伍末尾,等在著進入,無縫輪播也類似這種機制。
用昨天的思路寫CSS,對圖片用display:flex布局,你會發現圖片永遠是一字排開的,第二張一直在第一張后面,當你用transform: translateX(-100%)第一張往左移動,第二張的位置會受到影響,這樣就實現不了我們想要的效果;我們想要的效果是每張都是獨立,不能互相影響,所以這個CSS也不能這樣寫。
所以每張圖片應該用絕對定位來實現,那它的父元素就要用相對定位來做了
用JS 來控制圖片移動的動畫,當png1 向左移動時,png2也要向左移動(加上過渡動畫),因為兩個動畫先后執行時間過短,瀏覽器會默認同時進行,所以用setTimeout()設置一個定時器,在時間到后執行一段代碼或者函數
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后執行,png1 向左移動同時png2 也在向左移動;第二定時器6s后執行,png2 向左移動的同時png3 也向左移動,這就實現了第一輪的輪播,那怎樣讓它循環播放呢?
在第一個定時器執行的時候,png1 向左移動后,在視窗的左邊,我們已經讓它跑到視窗的右邊待命,讓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"}) //當png1動畫執行結束之后,給它添加一個class,讓它跑到右邊待命,這里面要把左移的css給干掉,不然它會一直在那里
});
},3000)
transitionend會在CSStransition動畫結束后出發。
one處理函數在每個元素上每種事件類型最多執行一次。
這里用on,你會發現一個問題,當動畫結束后,它就會把right給加上去,導致用于在右邊,所以這里要把on改成one。
整理下上面寫的代碼
- *{
- margin:0;
- padding:0
- box-sizing:border-box;
- }
- .window{
- height:300px;
- width:400px;
- margin:20px auto;
- overflow:hidden;
- }
- .images > img{
- transition: all 0.3s
- }
- .images{
- position:relative;
- }
- .images > .png1{
- position:absolute;
- left:0;
- top:0;
- }
- .images > .png2{
- position:absolute;
- left:100%;
- top:0;
- }
- .images > .png3{
- position:absolute;
- left:100%;
- top:0;
- }
- .images > img.right{
- position:absolute;
- top:0;
- left:100%;
- }
- 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"})
- })
- },3000)
- setTimeout(function(){
- $("#images > .png2").css({transform:"translateX(-200%)"});
- $("#images > .png3").css({transform:"translateX(-100%)"});
- $("#images > .png2").one("transitionend",function(e){
- $(e.currentTarget).addClass("right").css({transform:"none"})
- })
- },6000)
- setTimeout(function(){
- $("#images > .png3").css({transform:"translateX(-200%)"});
- $("#images > .png1").css({transform:"translateX(-100%)"});
- $("#images > .png3").one("transitionend",function(e){
- $(e.currentTarget).addClass("right").css({transform:"none"})
- })
- },9000)
上面代碼可以實現一輪播放,如果要一直循環下去,多加幾輪,或者用for循環去做。
本次用到了兩個新的API:
transitionend會在CSStransition動畫結束后出發。
one處理函數在每個元素上每種事件類型最多執行一次。
總結:做無縫輪播的關鍵是隊列,圖片1動作的同時圖片2也要動作,并且在動畫結束之后去圖片3后面待命,跟著圖片3一起動作,就這樣一直循環下去,就能實現無縫輪播了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95146.html
摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...
摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...
摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...
閱讀 2113·2021-11-05 09:42
閱讀 2856·2021-09-23 11:21
閱讀 2849·2019-08-30 14:00
閱讀 3318·2019-08-30 13:15
閱讀 468·2019-08-29 17:18
閱讀 3556·2019-08-29 16:29
閱讀 2755·2019-08-29 14:06
閱讀 2800·2019-08-23 14:41