400-800-9385
网站建设资讯详细

swiper视频+图片切换与swiper+animate

发表日期:2020-07-21 10:08:25   作者来源:林志平   浏览:536   标签:网站前端制作    
之前遇到在项目中需要做一个视频播放+图片的自动切换轮播,需要视频播放完成之后再切换下一张图片。我是用swiper的,先按照自动轮播图片那样做,设置好swiper的一些属性,例如: 分页器(pagination: '.swiper-pagination'),分页器是否换图,需要换图(paginationClickable :true),前进后退按钮的设置,运动速度的快慢(speed),是否要无限循环,是的话设置(loop:true),需要自动播放的的话设置(autoplay: 1000),操作了swiper-slide之后是否需要停止切换,默认是(autoplayDisableOnInteraction: true),不需要的话(autoplayDisableOnInteraction: false),
Swiper-slide高度需要随内容的多少改变(autoHeight: true)等。
在开始做之前就需要先引入css和js,如图:

代码1

需要做的轮播效果如下图:

效果1

在html里面需要添加
<div class="banner-video">
<video class="banner-background" style="width: 100%; object-fit: fill; " poster="" muted="" onended="myfun()" autoplay>
<source src="https://shipinpaishe.oss-cn-beijing.aliyuncs.com/AWEI.mp4" type="video/mp4">
</video>
</div>  
如下图:
 

代码2



Css需要根据自己需要的效果自己写,然后js如下图:
 

代码3



另外平时要是需要Swiper加上一些动画的话,首先需要引入css,如下图:
 

代码4



然后在HTML里面找到需要运动的元素加上样式名为ani ,swiper-animate-effect(切换的效果)、swiper-animate-duration(持续的时间)、swiper-animate-delay(延迟的时间)也要设置好。如下图:
 

代码5


这样就能做出一些动画的效果了。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5782.html