我们经常能够看到在图片轮播中，穿插着视频的播放，如下图为淘宝的一个产品轮播图，放个视频能够让顾客对产品有个更全面的认识。

我们可以用实现这个功能。用法就跟放图片一样，只是这里把图片换成视频就可以了。

只是如果放的是视频的话，就有一个问题，就是我们怎么在滑动结束的时候，自动停止播放上一个视频呢？

我们可以利用 swiper 提供的  (注意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);     });

 

O啦~~4不4超简单？~