jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码

Web前端开发 / 1573 次阅读

做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。

HTML代码：

<script src="js/swiper-bundle.min.js"></script>
<div class="videos">
	<div class="tab">
		<span>动漫</span>
		<span>电影</span>
		<span>综艺</span>
	</div>
	<div class="cont">
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="list">
			<div class="swiper">
				<div class="swiper-wrapper">
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
					<article class="swiper-slide"> 
						<div class="figure">
							<i class="img" style="background-image: url(files/cover_01.jpg);"></i>
						</div>
						<h2>电影名称</h2>
					</article>
				</div>
			</div>
		</div>
		
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</div>

CSS代码：

.videos .list {display:none;}

美化的样式代码这里不写。

jQuery代码：

$(function(){
	$('.videos .list').each(function(e){
		$(this).find('.swiper').attr('data-swiper',e);
	});
	var swipervideo;
	var swiperspan = $('.videos .tab span');
	swiperspan.click(function(){        
		$(this).addClass('cur').siblings('span').removeClass('cur');
		var _index = $(this).index();
		var _this = $(this).parents('.tab').siblings('.cont').find('.list').eq(_index);
		var _swiperid = _this.find('.swiper').attr('data-swiper');
		_this.stop().fadeIn('fast').siblings('.list').hide();
		if(typeof swipervideo != 'undefined'){
			swipervideo.destroy();
		}
		swipervideo = new Swiper('.videos .swiper[data-swiper="'+_swiperid+'"]',{
			slidesPerView: 3,
			spaceBetween:'2%',
			loop:true,
			autoplay: {
				delay: 5000,
				stopOnLastSlide: false,
				disableOnInteraction: true,
			},
			pagination: {
				el: '.videos .swiper-pagination',
				clickable:true,
			},
			navigation: {
				nextEl: '.videos .swiper-button-next',
				prevEl: '.videos .swiper-button-prev',
			},
			breakpoints: { 
				0: {
					slidesPerView: 1,
				},
				769: {
					slidesPerView: 2,
				},
				1025: {
					slidesPerView: 3,
				}
			}
		});
	});
	swiperspan.eq(0).trigger('click');
});

上面的代码基于Swiper 8.4.7版本，但方法思路是一样的。

扩展：整成一个函数来调用，方便多次使用

function swiperTabList(dom,object){
    $(dom).find('.swiper').each(function(e){
        $(this).attr('data-swiper',e);
    });
    var domSwiper;
    var domTab = $(dom).find('.tab span');
    domTab.click(function(){        
        $(this).addClass('active').siblings('span').removeClass('active');
        var _index = $(this).index();
        var _this = $(this).parents(dom).find('.list').eq(_index);
        var _id = _this.find('.swiper').attr('data-swiper');
        _this.stop().fadeIn('fast').siblings('.list').hide();
        if(typeof domSwiper != 'undefined'){
            domSwiper.destroy();
        }        
        var meta = {
            "slidesPerView":"1",
            "spaceBetween":"2.1875%",
            "loop":"false",
            "speed":"800",
            "breakpoints":{
                "751":{
                    "slidesPerView": "2"
                },
                "1025":{
                    "slidesPerView": "3"
                }
            }
        }
        //Object.assign()方法可以将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它只会拷贝可枚举的自有属性。如果只是简单的属性覆盖，使用扩展运算符或Object.assign()会比较方便。
        Object.assign(meta, object);
        domSwiper = new Swiper(dom + ' .swiper[data-swiper="'+_id+'"]',{
            slidesPerView:meta['slidesPerView'],
            spaceBetween:meta['spaceBetween'],
            loop:meta['loop'],
            loopAdditionalSlides:1,
            speed:meta['speed'],
            simulateTouch:false,
            allowTouchMove:false,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            breakpoints: meta['breakpoints']
        });
    });
    domTab.eq(0).trigger('click');
}

调用函数：

var object = {
    "slidesPerView":"1",
    "spaceBetween":"2.1875%",
    "loop":"false",
    "speed":"800",
    "breakpoints":{
        "751":{
            "slidesPerView": "2"
        },
        "1025":{
            "slidesPerView": "5"
        }
    }
}
swiperTabList('.videos',object);