近期手上一個(gè)手機(jī)站的部分模塊設(shè)計(jì)師設(shè)計(jì)的很有靈性，在傳統(tǒng)輪播切換效果上面還加上了頁(yè)碼效果和進(jìn)度條效果。如下圖：

 
由圖可以看到上面是圖片左右輪播，而且兩邊都留有提示區(qū)域。下面是一條進(jìn)度條，再下面是頁(yè)碼。這三個(gè)效果單個(gè)實(shí)現(xiàn)都不難，但是要將這三個(gè)效果整合到一個(gè)輪播效果里面，就需要費(fèi)一番功夫了。
 
恰巧在網(wǎng)上開(kāi)源插件中swiper中上訴效果都有，這里也就選擇使用swiper插件來(lái)進(jìn)行這個(gè)效果的開(kāi)發(fā)了。
 
 
Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)，是純javascript打造的滑動(dòng)特效插件，面相手機(jī)、平板電腦等移動(dòng)終端，在PC上也有較好的效果。
 
下面是實(shí)現(xiàn)該效果的部分代碼截圖：
Html結(jié)構(gòu)：

Css代碼：

Js代碼：

 
實(shí)現(xiàn)效果如下：

因?yàn)橛许?yè)碼效果，所以這里就不能設(shè)置循環(huán)，所以初始狀態(tài)下左邊是沒(méi)有提示內(nèi)容的。同時(shí)，在進(jìn)度條中有一個(gè)提示模塊，如下：

這里我是選擇在原有結(jié)構(gòu)中加上一個(gè)div來(lái)實(shí)現(xiàn)該效果的，具體代碼如下：

雖然是按照設(shè)計(jì)稿上的尺寸來(lái)寫(xiě)的，但是實(shí)際出來(lái)的效果卻是

寬度被縮放了，經(jīng)過(guò)排查發(fā)現(xiàn)是插件控制進(jìn)度條進(jìn)度的代碼影響到這里了，這算是一個(gè)bug吧，嘗試用transform來(lái)矯正，雖然初始狀態(tài)一致了，但是隨著滾動(dòng)，發(fā)現(xiàn)寬度還是會(huì)變化，而且這里用！Important來(lái)固定寬度是無(wú)效的。目前就這樣了，后面再想辦法改善這個(gè)bug吧。