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

朱艷萍

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

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

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

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

1 無(wú)縫輪播概念

所謂無(wú)縫焦點(diǎn)輪播主要是指圖片從左到右或從上到下運(yùn)動(dòng)時(shí)，從一端切換到另一端時(shí)的切換是無(wú)間斷的連續(xù)播放。

2 原理解析

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

1） 添加圖片法

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

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

2） 定位法

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

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

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

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

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

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

[HTML布局 ]