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

Swiper是一个功能强大的前端工具，可以制作酷炫的轮播图和全屏滚动网页。在前阵子项目需要做一个视频加图片结合的轮播图，而我却没有找到合适的案例来做这个轮播图，只好自己动手尝试做一个出来。
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的淡入淡出效果；这样视频或者图片的过渡会自然些，选择去掉滑动效果的原因是，会减少人为滑动下一屏的问题的出现几率。

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

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

广告

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