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

朱艷萍

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

關(guān)鍵詞：添加圖片法；定位法；DOM-CSS；relative；static

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

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

1 無縫輪播概念

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

2 原理解析

我們?？吹降臒o縫輪播的實現(xiàn)方法主要由兩種，1）添加圖片法，2）定位法，下面文章分別針對這兩種方法從不同的角度進行剖析。

1） 添加圖片法

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

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

2） 定位法

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

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

3 JavaScript+CSS+HTML實現(xiàn)

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

1） 添加圖片法實現(xiàn)：

添加的圖片分別體現(xiàn)在添加了底紋的LI語句

[HTML布局 ]