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不一样哦）。

作者：J9国际集团冯秋宁