swiper4.x的图片与视频混合轮播实现

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果，是前端常用的制作轮播。

但是官方并没有给出图片与视频混合轮播的例子。

一、整理思路

①判断当前是图片还是视频

②如果是图片则正常设置轮播时间，如果是视频则获取播放状态，如果是播放状态，轮播不切换，播放结束后开始轮播下一屏。

③分屏器切换事件添加

二、实现代码

①html代码

<div class='swiper-container'>
	<div class='swiper-wrapper'>
		<!--第一屏为图片-->
		<div class='swiper-slide'>
			<div class='banner-video'>
				<video src="images/2.mp4" id='video1' object-fit: 'fill'poster='' muted='' onended='playEnd()' onplay='startPlay()' autoplay='true'>
					<source src="images/2.mp4" type="video/mp4">
				</video>
			</div>
		</div>
		<!--第二屏为图片-->
		<div class='swiper-slide'>
			<a href="#"><img src='images/banner-1.jpg' /></a>
		</div>
	</div>
</div>

②JS代码（版本为swiper4.x）

//初始化Swiper
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination', //分页器
		clickable: true,
	},
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false, //播放到最后一张是否停止
		disableOnInteraction: false, //手动滑动是否停止自动播放
	},
	observer: true,
	observeParents: true,
	fadeEffect: {
   	 crossFade: true,
 	},
	effect : 'fade',//添加切换淡出效果
	on: {
		transitionEnd: function() { //切换下一屏时，运行的代码
			//判断当前轮播屏是否为视频
			if($(".swiper-slide-active .banner-video").hasClass('banner-video')) {
				//自动播放当前页面的视频
				$('.swiper-slide-active video')[0].play();
				mySwiper.autoplay.stop(); //停止轮播图轮播
			}
		},
	}

});
//视频播放完毕监听事件
window.playEnd = function() {
	mySwiper.autoplay.start(); //轮播图开始自动播放
	mySwiper.slideNext(); //播放完视频，立即切换下一个
	mySwiper.autoplay.delay = 3000; //轮播图自动播放时秒数为5秒
	$('.swiper-slide video')[0].pause(); //所有背景视频停止播放
}
//视频开始播放监听事件
window.startPlay = function() {
	//判断当前轮播屏是否为视频
	if($(".swiper-slide-active .banner-video").hasClass('banner-video')) {
		mySwiper.autoplay.stop(); //停止轮播图轮播
	}
};

以上就是基于swiper4.x版本的图片视频混合轮播的实现。可以全部是图片，也可以全部是视频，也可以图片视频混合都支持。

注意：后期发现一个问题，就是每次最后一个视频播放完后会卡顿3秒，应该是mySwiper.slideNext();不会从最后一个跳到第一个，所以重新优化如下：使用mySwiper.slideTo(0)直接定位到第一个，然后再使用mySwiper.slideNext()切换下一个。

//视频播放完毕监听事件
window.playEnd = function() {
	if(mySwiper.isEnd) { //判断是否为最后一个
		mySwiper.slideTo(0);//如果是最后一个直接跳到第一个
	} else {
		//非最后一个的话正常执行
		mySwiper.autoplay.start(); //轮播图开始自动播放
		mySwiper.slideNext(); //播放完视频，立即切换下一个
		mySwiper.autoplay.delay = 3000; //轮播图自动播放时秒数为5秒
		$('.swiper-slide video')[0].pause(); //所有背景视频停止播放
	}

}

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈