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

2023-02-20    分类: 网站建设

Swiper是一个功能强大的前端工具,可以制作酷炫的轮播图和全屏滚动网页。在前阵子项目需要做一个视频加图片结合的轮播图,而我却没有找到合适的案例来做这个轮播图,只好自己动手尝试做一个出来。
轮播图的需求是,如何在自动轮播的情况下,做到视频和图片好结合的效果。并使其做到,背景视频播放完,自动切换为下一屏。提供本人的思路: 先确认当前屏幕是视频还是图片; 当其为图片时,3秒后自动切换下一屏; 当其为视频时,获取其播放状态,当它是播放时,轮播图不切换;当它结束播放时,轮播图自动切换下一屏。 最后,使用左右按钮或点击页码,也可让视频播放或图片自动切换。放上代码: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不一样哦)。

分享文章:使用swiper制作视频加图片较完美结合的轮播图
本文来源:https://www.cdcxhl.com/news/238263.html

成都网站建设公司_创新互联,为您提供ChatGPT云服务器电子商务定制网站域名注册网站维护

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站网页设计