function tabs(obj, swiperObj, className, index) {
var tabSwiper = new Swiper(swiperObj, {
initialSlide: index, // 设定初始化时slide的索引
speed: 500, //滑动速度,单位ms
// autoHeight: true, //高度随内容变化
onSlideChangeStart: function() {
if (tabSwiper) {
/*判断tabSwiper是否存在,否则当哈希值不为0的时候会报错 */
$(obj + "." + className).removeClass(className); /*有当前类名的删除类名,给下一个添加当前类名*/
$(obj).eq(tabSwiper.activeIndex).addClass(className); /*activeIndex是过渡后的slide索引*/
}
},
on:{
slideChange: function(){
$('.swiperTab > li').removeClass("myActive");
$('.swiperTab > li').eq(this.activeIndex).addClass('myActive');
},
},
});
// 模拟点击事件,如果是移入事件,将mousedown 改为 mouseenter
$(obj).on('touchstart mousedown', function(e) {
e.preventDefault();/*清除默认事件*/
$(obj + "." + className).removeClass(className);
$(this).addClass(className);/*点击当前导航 改变当前样式*/
tabSwiper.slideTo($(this).index());/*滑动到对应的滑块*/
})
};
$(function() {
//swiperTab 是你导航的className,active是你当前状态的className
$('.swiperTab > li').eq(0).addClass('myActive');
tabs('.swiperTab > li', '.swiper2', 'myActive');
});
tab选项卡联动swiper轮播图
最新推荐文章于 2024-05-20 08:24:41 发布