JQuery/PHP

Swiper 中有视频时滑动停止后视频停止播放

也想出现在这里?联系我们
创客云

我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识。我们可以用 swiper 实现这个功能。用法就跟放图片一样,只是这里把图片换成视频就可以了。只是如果放的是视频的话,就有一个问题,就是我们怎么在滑动结束的时候,自动停止播放上一个视频呢?

我们可以利用 swiper 提供的 onSlideChangeEnd (注意 swiper 版本,我用的是 swiper 3)方法来做到这种效果,具体代码如下:

也想出现在这里?联系我们
创客主机
  1.     $(".swiper-container").each(function () { //写each是用于一个页面出现多个轮播
  2.             var _this = $(this);
  3.             var videoList = $(this).find("video"); //找到轮播图下面的视频个数
  4.             var space = $(this).data("space");
  5.             var count = $(this).data("count") || 1;
  6.             var swiperSetting = {};
  7.             swiperSetting.pagination = ".swiper-pagination";
  8.             swiperSetting.preloadImages = false;
  9.             swiperSetting.lazyLoading = true;
  10.             swiperSetting.loop = true;
  11.             swiperSetting.spaceBetween = space;
  12.             swiperSetting.slidesPerView = count;
  13.             if (videoList.length) {
  14.                 swiperSetting.autoplay = false; //如果有视频,禁止循环播放
  15.                 swiperSetting.onSlideChangeEnd = function (swiper) { //滚动停止后视频停止播放
  16.                     for (var i = 0; i < videoList.length; i++) {
  17.                         videoList[i].pause();
  18.                     }
  19.                 }
  20.             } else {
  21.                 swiperSetting.autoplay = 3000; //没视频时,每隔3秒播放
  22.             }
  23.             new Swiper(_this, swiperSetting);
  24.         });
资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!