国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

最簡單的無縫輪播

Kyxy / 1796人閱讀

摘要:昨天學習了輪播的原理,今天再來看看無縫輪播的技術。無縫輪播無縫輪播的原來大致類似小時候跳大繩,小朋友一個個進入,一個個出來,出來后排到隊伍末尾,等在著進入,無縫輪播也類似這種機制。

昨天學習了輪播的原理,今天再來看看無縫輪播的技術。

昨天學習的輪播機制類似于走馬燈,所有圖片排成一排,輪流在你眼前走過,你就會感覺他們動起來了,今天學的無縫輪播就不能用昨天的思路了,它和昨天最大的區別是,從最后一張回到第一張是直接切換的,不是先回到第一張圖片的位置,然后再往后切換。

無縫輪播

無縫輪播的原來大致類似小時候跳大繩,小朋友一個個進入,一個個出來,出來后排到隊伍末尾,等在著進入,無縫輪播也類似這種機制。

用昨天的思路寫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

整理下上面寫的代碼

上面代碼可以實現一輪播放,如果要一直循環下去,多加幾輪,或者用for循環去做。

本次用到了兩個新的API:

transitionend會在CSStransition動畫結束后出發。

one處理函數在每個元素上每種事件類型最多執行一次。

總結:

做無縫輪播的關鍵是隊列,圖片1動作的同時圖片2也要動作,并且在動畫結束之后去圖片3后面待命,跟著圖片3一起動作,就這樣一直循環下去,就能實現無縫輪播了。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95146.html

相關文章

  • 無縫輪播一種方式原理

    摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...

    MudOnTire 評論0 收藏0
  • 無縫輪播一種方式原理

    摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...

    AlienZHOU 評論0 收藏0
  • 無縫輪播一種方式原理

    摘要:無縫輪播的原理在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就如同無縫一般。 之前面試被問到這個問題,之前都是隨便找大神插件,知道怎么去做,但是一直沒實現過。 無縫輪播的原理 在滾動層前后分別插入最后一個元素和最前面一個元素,然后在動畫滾到最后或者最前的時候,初始化滾動層的位置樣式,速度很快,無法察覺,就...

    BicycleWarrior 評論0 收藏0
  • 無縫輪播

    摘要:無縫輪播工作中遇到輪播怎么辦千萬不要自己寫輪播我們學這么多基礎是為了能夠看懂大神的代碼然后用大神的代碼因為如果自己寫一個輪播就可能出現各種各樣的如果是在工作中這樣做無異于浪費自己的時間降低工作效率最好的方法是直接用大神寫好的源碼然后看使用文 無縫輪播 工作中遇到輪播怎么辦?千萬不要自己寫輪播我們學這么多基礎是為了能夠看懂大神的代碼,然后用大神的代碼因為如果自己寫,一個輪播,就可能出現各...

    xiaochao 評論0 收藏0
  • 從零開始寫一個輪播

    摘要:什么是輪播輪播,英文,也就是幻燈片的意思,我們可以手動或者自動切換一張張的照片達到顯示的目的。怎么實現一個輪播一般,我們可以兩種方法來實現輪播,例如,核心思路使用透明度來切換照片,使用距離來平移照片。 什么是輪播 輪播,英文slider,也就是幻燈片的意思,我們可以手動或者自動切換一張張的照片達到顯示的目的。各大電商網站都會使用輪播來展示商品,可以在相對較小的空間里,實現多種展示。 怎...

    olle 評論0 收藏0

發表評論

0條評論

Kyxy

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<