swiper一般是用于幻灯片效果，本身没有提供对tab切换效果支持，页面如果同时存在幻灯片和tab切换时，需要分别引用不同的js插件。其实两个切换原理都是基本一样的，能否把swiper也用于tab切换？答案是：可以的！

html:

<!-- tab切换box -->
<div class="box-swiper">
<div class="hd">
<ul class="pagination-swiper"></ul>
<ul class="pagination">
<li><a href="#">栏目名称1</a></li>
<li><a href="#">栏目名称2</a></li>
</ul>
<a href="nojavascript...void(0)" class="more">查看更多</a>
</div>
<div class="bd swiper-wrapper">
<div class="swiper-slide">
栏目1的内容
</div>
<div class="swiper-slide">
栏目2的内容
</div>
</div>
</div>

.box代码的结构基本上跟我们原来输出习惯一样，主要变化是.hd里的栏目切换项多了个空的.pagination-swiper，这里用到了swiper的分页器效果实现。由于swiper渲染时会把分页器里面的内容清除，再加入自己的代码，所有这里的.pagination是临时存放分页器代码，渲染时再把代码加入到.pagination-swiper里。

js代码：

// box-swiper
var newsSlide = new Swiper('.box-swiper', {
effect: 'slide',
loop: false,
speed: 1000,
autoHeight: true,
simulateTouch: false,
allowTouchMove: false,
pagination:{
el: '.hd ul.pagination-swiper',
type: 'bullets',
bulletClass: "item",
bulletActiveClass: "active",
renderBullet: function(index, className){
var node = this.$el.find(".pagination li").eq(index);
if(node.length > 0){
return '<li class="' + className + '">' + node.html() + '</li>';
}
return '<li class="' + className + '"><a href="nojavascript...;">切换项' + index + '</a></li>';
},
},
on:{
init: function(swiper){
var bullets = swiper.pagination.bullets;
// 更多链接赋值
swiper.$el.find(".hd .more").attr("href", bullets.eq(swiper.realIndex).find("a").attr("href"));
// 去掉临时分页器
this.$el.find(".pagination").remove();
$(this.$el.find(".pagination-swiper")).show();
// 分页器添加鼠标经过触发事件
for(i=0;i<bullets.length;i++){< div="">
bullets[i].index=i
bullets[i].onmouseover=function(){
swiper.slideTo(this.index);
};
bullets[i].onclick=function(){
swiper.slideTo(this.index);
};
}
},
slideChangeTransitionStart: function(swiper){
// 每次执行切换后对more链接进行修改
var bullets = swiper.pagination.bullets;
swiper.$el.find(".hd .more").attr("href", bullets.eq(swiper.realIndex).find("a").attr("href"));
}
}
})