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

效果如圖：

Html如圖：

 
Js如圖：
 

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