网站前端制作之tab+swiper的两种切换

　　关于页面中常用的效果，tab+swiper的切换很常见，多见于两种情况，一种是li切换swiper的slide，一种是li切换swiper。当tabs的li切换swiper的slide，效果如下图所示：

　　Html：

　　pclass=tabswowfadeInU

　　ulclass=clearfix

　　ahref=javascript：;

　　办公环境

　　/a

　　/li

　　ahref=javascript：;

　　实验大楼

　　/a

　　/li

　　ahref=javascript：;

　　生产基地

　　/a

　　/li

　　/ul

　　/

　　pclass=tabboxwowfadeInU

　　pclass=swiper-box

　　pclass=swiper-wrapper

　　pclass=swiper-slidestop-swiping

　　办公环境

　　/

　　pclass=swiper-slidestop-swiping

　　实验大楼/

　　pclass=swiper-slidestop-swiping

　　生产基地

　　/

　　/

　　！--AddPagination--

　　pclass=swiper-pagination/

　　/

　　！--AddArrows--

　　pclass=swiper-button-prev/

　　pclass=swiper-button-next/

　　/

　　JS：

　　varswiper=newSwiper('.swiper-box'，{

　　pagination：'.swiper-pagination'，

　　paginationClickable：true，

　　grabCursor：true，

　　nextButton：'.swiper-button-next'，

　　prevButton：'.swiper-button-prev'，

　　noSwiping：true，

　　noSwipingClass：'stop-swiping'，

　　autoHeight：true，

　　observer：true，

　　observeParents：true，

　　onSlideChangeStart：function(swiper){

　　vari=swiper.activeIndex;

　　$(.tabsulli).eq(i).addClass(active).siblings().removeClass(active);

　　}，

　　});

　　$('.tabsulli').click(function(){

　　varindex=$(this).index();

　　$(this).addClass('active').siblings('li').removeClass('active');

　　swiper.slideTo($(this).index()，500，false);

　　swiper.update();

　　});

　　先引入jquery插件和swiper.min.js和swiper.min.css文件，定义swiper的大小，初始化Swiper，tabs的li设置一个默认的选中效果active，对应swiper的一个swiper-slide，点击tabs的li时，当前点击的li添加默认的选中效果类名为active，其他的同级li移除active，在获取当前点击的li标签的下标$(this).index()，执行过渡到索引下标数字等于传入参数index的页面（slide）处，速度为500。并且可以将runCallbacks设置为false，原来是默认为true，那么transition（过渡）不会产生onSlideChange回调函数。那么，就可以做到点击tabs的li能切换对应的swiper-slide，滑动swiper-slide也能切换li的默认选中效果类名active。

　　当tabs的li切换swiper时，如下图所示：Html：Js：关于两个swiper轮播切换，一个显示，一个隐藏的，需要注意的是如果用display：none;和display：block;swiper的自动切换，点击li切换swiper之后，自动轮播会出错，那么可以用以下的css代替display：none;和display：block;这样做的话，tabswiper切换后自动轮播也不会出错了。

　　Css：