我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识。我们可以用 swiper 实现这个功能。用法就跟放图片一样,只是这里把图片换成视频就可以了。只是如果放的是视频的话,就有一个问题,就是我们怎么在滑动结束的时候,自动停止播放上一个视频呢?
我们可以利用 swiper 提供的 onSlideChangeEnd (注意 swiper 版本,我用的是 swiper 3)方法来做到这种效果,具体代码如下:
$(".swiper-container").each(function () { //写each是用于一个页面出现多个轮播
var _this = $(this);
var videoList = $(this).find("video"); //找到轮播图下面的视频个数
var space = $(this).data("space");
var count = $(this).data("count") || 1;
var swiperSetting = {};
swiperSetting.pagination = ".swiper-pagination";
swiperSetting.preloadImages = false;
swiperSetting.lazyLoading = true;
swiperSetting.loop = true;
swiperSetting.spaceBetween = space;
swiperSetting.slidesPerView = count;
if (videoList.length) {
swiperSetting.autoplay = false; //如果有视频,禁止循环播放
swiperSetting.onSlideChangeEnd = function (swiper) { //滚动停止后视频停止播放
for (var i = 0; i < videoList.length; i++) {
videoList[i].pause();
}
}
} else {
swiperSetting.autoplay = 3000; //没视频时,每隔3秒播放
}
new Swiper(_this, swiperSetting);
});
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!