网站前端制作之tab+swiper的两种切换
关于页面中常用的效果，tab+swiper的切换很常见，多见于两种情况，一种是li切换swiper的slide，一种是li切换swiper。当tabs的li切换swiper的slide，效果如下图所示：
Html:
JS:
var swiper = new Swiper('.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){
var i = swiper.activeIndex;
$(".tabs ul li").eq(i).addClass("active").siblings().removeClass("active");
},
});
$('.tabs ul li').click(function(){
var index = $(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时，如下图所示：
Css:
以上就是速优网络和大家分享的"网站前端制作之tab+swiper的两种切换",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。
TAG标签：
