使用swiper制作视频加图片较完美结合的轮播图

Swiper是一个功能强大的前端工具，可以制作酷炫的轮播图和全屏滚动网页。在前阵子项目需要做一个视频加图片结合的轮播图，而我却没有找到合适的案例来做这个轮播图，只好自己动手尝试做一个出来。
轮播图的需求是，如何在自动轮播的情况下，做到视频和图片完美结合的效果。并使其做到，背景视频播放完，自动切换为下一屏。

提供本人的思路：

1. 先确认当前屏幕是视频还是图片；
2. 当其为图片时，3秒后自动切换下一屏；
3. 当其为视频时，获取其播放状态，当它是播放时，轮播图不切换；当它结束播放时，轮播图自动切换下一屏。
4. 最后，使用左右按钮或点击页码，也可让视频播放或图片自动切换。

放上代码：

1,html代码：      

2，js代码：

$(function() {
var swiper1 = new Swiper('#sw1 .swiper-container', {
                  pagination: '#sw1 .swiper-pagination',
                  paginationClickable: true,
                  speed: 1000, //轮播时使用时间
                  loop: true, //自动轮播
                  observer: true,
                  observeParents: true,
                  autoplayDisableOnInteraction: false,
                  autoplay: 3000,
                  noSwiping: true,
                  effect: 'fade', //使用3d效果，淡入淡出，让轮播更加自然
//切换下一屏时，运行的代码
                  onTransitionEnd: function(swiper) {
//判断当前轮播屏是否为视频
                  if($(".swiper-slide-active .item").children().hasClass('banner-video')) {
//自动播放当前页面的视频
                              $('.swiper-slide-active video')[0].play();
                              swiper.stopAutoplay();//停止轮播图轮播
                              swiper.params.autoplay = 1000; //轮播图轮播时秒数
                        }
                  }
            });
//js开始加载时，查看第一屏（当前屏）是否为视频
                  $(".swiper-slide-active video").on('play', function() {
                        swiper1.stopAutoplay(); //停止轮播图轮播
                  })
                  $('.swiper-slide-active video')[0].play(); //视频开始播放
                  );
            })；
 
//myfun（）函数与html结合，做到，查看视频播放状态，当视频播放完时，运行此函数
            function myfun() {
                  swiper1.startAutoplay(); //轮播图开始自动播放
                  swiper1.params.autoplay = 3000; //轮播图自动播放时秒数为3秒
                  $('.swiper-slide video')[0].pause(); //所有背景视频停止播放
            }

为什么说是较完美呢？

如果人为去点击移下一屏的话，未移动前的当前屏是视频背景时，会出现视频轮播没停止的问题。所以，这边我用了css3的淡入淡出效果；这样视频或者图片的过渡会自然些，选择去掉滑动效果的原因是，会减少人为滑动下一屏的问题的出现几率。
最后，放上本次项目的实现效果演示，也就是客户的网站（pc可看见效果，移动端轮播图效果与pc不一样哦）。

作者：方维网络冯秋宁