当前位置:主页 > 建站服务 >

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

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

提供本人的思路:

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

放上代码:

1,html代码:

<div id="sw1" class="banner"> <div class="swiper-container"> <div class="swiper-wrapper">//第一屏代码,为背景视频 <div class="swiper-slide swiper-no-swiping"> <a class="item"> <div class="banner-video"> <video class="banner-background" src="images/2.mp4" style="width: 100%; object-fit: fill" poster="" muted="" onended="myfun()" autoplay="true"> <source src="images/2.mp4" type="video/mp4"> </video> </div> </a> </div>//第二屏代码,为背景图片 <div class="swiper-slide swiper-no-swiping" style="background:url(images/banner-1.jpg) center center no-repeat;"> </div> </div>//页码 <div class="swiper-pagination"></div> </div></div>

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不一样哦)。作者:方维网络冯秋宁