Swiper是一個(gè)功能強(qiáng)大的前端工具，可以制作酷炫的輪播圖和全屏滾動(dòng)網(wǎng)頁(yè)。在前陣子項(xiàng)目需要做一個(gè)視頻加圖片結(jié)合的輪播圖，而我卻沒(méi)有找到合適的案例來(lái)做這個(gè)輪播圖，只好自己動(dòng)手嘗試做一個(gè)出來(lái)。
輪播圖的需求是，如何在自動(dòng)輪播的情況下，做到視頻和圖片完美結(jié)合的效果。并使其做到，背景視頻播放完，自動(dòng)切換為下一屏。

提供本人的思路：

1. 先確認(rèn)當(dāng)前屏幕是視頻還是圖片；
2. 當(dāng)其為圖片時(shí)，3秒后自動(dòng)切換下一屏；
3. 當(dāng)其為視頻時(shí)，獲取其播放狀態(tài)，當(dāng)它是播放時(shí)，輪播圖不切換；當(dāng)它結(jié)束播放時(shí)，輪播圖自動(dòng)切換下一屏。
4. 最后，使用左右按鈕或點(diǎn)擊頁(yè)碼，也可讓視頻播放或圖片自動(dòng)切換。

放上代碼：

1,html代碼：      

2，js代碼：

$(function() {
var swiper1 = new Swiper('#sw1 .swiper-container', {
                  pagination: '#sw1 .swiper-pagination',
                  paginationClickable: true,
                  speed: 1000, //輪播時(shí)使用時(shí)間
                  loop: true, //自動(dòng)輪播
                  observer: true,
                  observeParents: true,
                  autoplayDisableOnInteraction: false,
                  autoplay: 3000,
                  noSwiping: true,
                  effect: 'fade', //使用3d效果，淡入淡出，讓輪播更加自然
//切換下一屏?xí)r，運(yùn)行的代碼
                  onTransitionEnd: function(swiper) {
//判斷當(dāng)前輪播屏是否為視頻
                  if($(".swiper-slide-active .item").children().hasClass('banner-video')) {
//自動(dòng)播放當(dāng)前頁(yè)面的視頻
                              $('.swiper-slide-active video')[0].play();
                              swiper.stopAutoplay();//停止輪播圖輪播
                              swiper.params.autoplay = 1000; //輪播圖輪播時(shí)秒數(shù)
                        }
                  }
            });
//js開(kāi)始加載時(shí)，查看第一屏（當(dāng)前屏）是否為視頻
                  $(".swiper-slide-active video").on('play', function() {
                        swiper1.stopAutoplay(); //停止輪播圖輪播
                  })
                  $('.swiper-slide-active video')[0].play(); //視頻開(kāi)始播放
                  );
            })；
 
//myfun（）函數(shù)與html結(jié)合，做到，查看視頻播放狀態(tài)，當(dāng)視頻播放完時(shí)，運(yùn)行此函數(shù)
            function myfun() {
                  swiper1.startAutoplay(); //輪播圖開(kāi)始自動(dòng)播放
                  swiper1.params.autoplay = 3000; //輪播圖自動(dòng)播放時(shí)秒數(shù)為3秒
                  $('.swiper-slide video')[0].pause(); //所有背景視頻停止播放
            }

為什么說(shuō)是較完美呢？

如果人為去點(diǎn)擊移下一屏的話(huà)，未移動(dòng)前的當(dāng)前屏是視頻背景時(shí)，會(huì)出現(xiàn)視頻輪播沒(méi)停止的問(wèn)題。所以，這邊我用了css3的淡入淡出效果；這樣視頻或者圖片的過(guò)渡會(huì)自然些，選擇去掉滑動(dòng)效果的原因是，會(huì)減少人為滑動(dòng)下一屏的問(wèn)題的出現(xiàn)幾率。
最后，放上本次項(xiàng)目的實(shí)現(xiàn)效果演示，也就是客戶(hù)的網(wǎng)站（pc可看見(jiàn)效果，移動(dòng)端輪播圖效果與pc不一樣哦）。

作者：方維網(wǎng)絡(luò)馮秋寧