制作輪播圖時，一般都會有自動輪播和自動輪播間隔時間的設(shè)定，這是簡單的輪播圖效果，而制作進度條輪播效果，需要用到swiper3的api來使用，進度條走滿的時間是跟自動輪播的間隔時間相同，當(dāng)人為切換輪播圖時，進度條需要重置，重新開始計算時間。

效果如圖：

Html如圖：

 
Js如圖：
 

 
   這里我們設(shè)置了自動輪播的時間間隔為5s，Swiper3的指示點是自動生成的，達不到指示條的效果，所以我們通過js來添加html標(biāo)簽注入其中，初始化時使用js動畫來完成第一個進度條動畫，然后使用swiper3的api來完成其余進度條動畫，slideChangeTransitionStart（回調(diào)函數(shù)，swiper從當(dāng)前slide開始過渡到另一個slide時執(zhí)行）來終止運動種的進度動畫，onSlideChangeEnd（回調(diào)函數(shù)，swiper從一個slide過渡到另一個slide結(jié)束時執(zhí)行）來重新開始動畫。