前端無縫焦點輪播原理之圖形化剖析與JavaScript實現

朱艷萍

摘要：該文就主要針對前端開發中見得最多用得最普遍的無縫焦點輪播頁面效果，使用圖示法還原其執行原理，用原生Javascript語言結合css3樣式與HTML結構進行實現，向讀者揭示了絢麗多彩的前端特效的冰山一角。

關鍵詞：添加圖片法；定位法；DOM-CSS；relative；static

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）03-0187-02

當前的世界是互聯網的世界，當前的時代是互聯網+的時代，互聯網的發展用日新月異，突飛猛進形容一點不為過，各種新技術，新標準層出不窮，各大互聯網公司越來越重視web產品的前端重構與開發，頁面交互也越來越豐富，視覺效果是越來越絢麗，整個前端開發發展勢頭迅猛。本文就以前端開發中見得最多用得最普遍的無縫焦點輪播頁面效果為例，使用圖示法還原其執行原理，用原生Javascript語言結合css3樣式與HTML結構進行實現，揭開前端開發奧妙冰山一角。

1 無縫輪播概念

所謂無縫焦點輪播主要是指圖片從左到右或從上到下運動時，從一端切換到另一端時的切換是無間斷的連續播放。

2 原理解析

我們常看到的無縫輪播的實現方法主要由兩種，1）添加圖片法，2）定位法，下面文章分別針對這兩種方法從不同的角度進行剖析。

1） 添加圖片法

所謂添加圖片法就是在原來圖片的最開頭添加上原來的最后一張圖片，將原來第一張圖片再添加一份到最后面，我們以左右運動為例進行剖析，分別代表原來第一第二第三第四第五張圖片，容納所有圖片的矩形的大矩形稱之為“盒子”，其中最高的那個固定位置的矩形表示可視區，添加圖片后，布局上的變化用示意為：，CSS變化主要體現在容納所有圖片的“盒子”的寬度要增加兩個圖片的寬度，同時，盒子在初始定位要改變，必須往左一定一個圖片寬度的位置，讓顯示區能夠顯示出原來的第一張圖片。實現無縫焦點輪播的過程中，主要難點是解決兩個端頭的切換是無間斷的，圖1表達的是從右往左運動到第五張圖片時，如何從第五張圖片不間斷切換到第一張圖片，如圖1所示。

描述：圖1中狀態1表示目前運動到第5張圖片顯示的狀態，狀態2表示在該方法中，讓整個“盒子”正常往左運動，顯示出添加的圖片1，在這個運動剛剛完成后顯示為狀態2時，通過DOM-CSS技術修改整個“盒子”的left屬性值到狀態3，是的，在這個方法中從狀態2到狀態3的過程便是整個無縫切換的核心與本質。同樣的道理，我們用圖示剖析一下從左往右如何無縫切換，如圖2所示：狀態1到狀態2“盒子”都正常運動，在運動到狀態2后，立刻通過DOM-CSS改變“盒子”的left屬性值為狀態3，不知不覺間實現無縫的切換。無論是圖1還是圖2，我們看到在從狀態2到狀態3的變化過程都是通過DOM-CSS來完成的，因為可視區是沒有變化的，如圖1中狀態2到狀態3時可視區一直都是顯示第1張圖片，圖2中一直都是顯示第5張圖片，用戶的眼睛根本不會察覺到兩個狀態切換的瞬間，所謂無間斷就這樣實現了。

2） 定位法

所謂定位法顧名思義就是通過改變定位的方式實現無間斷。在該方法中，不用改變布局，不用改變CSS，主要是在實現過程中通過DOM-CSS技術，結合對定位方式relative的理解來實現，本文仍然結合圖片來揭示該方法原理，如圖3所示：在“盒子”運動到狀態1時，利用DOM-CSS將第一張圖片的定位方式改為relative，同時修改第一張圖片的left屬性值，如狀態2的所示，然后“盒子”正常運動到狀態3，此時顯示區顯示的是第一張圖片，在這個狀態剛到達的同時，還是通過DOM-CSS將第一張圖片的定位方式還原為默認static方式，此時就顯示為狀態4。

與此同時，修改“盒子”的left屬性值，如圖3中狀態5所示，我們發現在從狀態3到狀態5的過程中，顯示區一直顯示的是第一張圖片，其中的狀態4中的顯示區為空白是通過DOM-CSS操作的，用戶的肉眼根本無法發現，“他”的眼里一直只有第一張圖片，從而巧妙實現“無間斷”。從左到右的無間斷切換圖示如圖4所示，關鍵變化技巧仍然在狀態2到狀態5的過程中，其一是要明白relative定位的本質，relative定位的對象仍然在文檔流中的，其二，抓住時機修改端頭的圖片的定位方式和left屬性值以及盒子的left屬性值。

3 JavaScript+CSS+HTML實現

針對以上兩種無間斷切換的剖析，下面用Javascript進行實現。

1） 添加圖片法實現：

添加的圖片分別體現在添加了底紋的LI語句

[HTML布局 ]