Swiper(Swiper master)是目前应▲用较广泛□□□的移动端□□网页触摸□□内容滑动js插件。一些轮播□□图切换功□□能同时也□□适用于PC端。
 
近期手上□□□□一个项目□□□□网站的首□□□□页轮播图□□□□模块就运□□□用到了swiper插件。效果图如□□□□下：
 

 
左侧下方△是新闻切□□换，右侧下方□□□□是轮播左◤右切换箭□□头、分式导航□□□和当前轮□□□播图的选□□中状态横□□□线。
 
在swiper的基础案例中有很多类似的切换demo，有基础轮播：
 

也有分式导航轮播：
 

 
但是我这◆里要做的□□包含了基□□□□础轮播的□□页码和分□□□式轮播的□□□页码，而在swiper中，这些都是◣基于div：swiper-pagination实现的，而一个轮▼播模块中swiper-pagination只出现一◥次。因此我就□□□想在swiper基础的轮□□播功能上□□□□加上分式，来实现手★上项目的□□□轮播模块□□□功能。
 
至于左右◆箭头和选□□中状态的□□□横线这些□□□□在原有基□□础上修改□□□□一下CSS就实现了，在这基础□□□上增加分□□□式也不难，先上结构：
 

 
红框中的□□是轮播主□□□□体结构；绿框是常□□规分页器，这里修改CSS就能实现□□□图中白色♦横线以及□□□当前轮播※对应选中□□状态；篮框是分□□□□式页码模□□块，n1 是当前页□□码，n2是轮播总□□□□页码；灰色框是□□□□左右切换□□□□箭头，修改CSS就能实现□□□□图中效果。
 
下面是该轮播模块调用的js代码：
 

 
该代码只□□□□能保证轮□□□播图正常□□轮播，分式分页□□□□功能是由◢下面js代码控制·的：
 

 
然后将该□□□□方法 num(); 放入到swiper的回调函□□数 onSlideChangeEnd:function(swiper){}中，这样就实□□□现了在图□□□片一次轮□□□□播结束时，n1显示的数□□字随之改□□变的功能。
 
有点局限□□的是，这里不支※持循环轮□□□播，如果设置loop:ture 那么n2获取到的•数字就不□□□准确，从而造成□□□□功能异常，所以这里▲没有开启□□循环轮播。
 
相信其他□□轮播插件□□□也能实现□□□□这些功能，当然，也可以自□□己手写这□□样的轮播✦功能，具体怎么□□做就看各□□□□人喜好了。