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

效果如圖：

Html如圖：

 
Js如圖：
 

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