国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

swiper視頻+圖片切換與swiper+animate

發(fā)表日期:2020-07-21 10:08:25   作者來源:林志平   瀏覽:3898   標(biāo)簽:網(wǎng)站前端制作    
之前遇到在項(xiàng)目中需要做一個(gè)視頻播放+圖片的自動(dòng)切換輪播,需要視頻播放完成之后再切換下一張圖片。我是用swiper的,先按照自動(dòng)輪播圖片那樣做,設(shè)置好swiper的一些屬性,例如: 分頁器(pagination: '.swiper-pagination'),分頁器是否換圖,需要換圖(paginationClickable :true),前進(jìn)后退按鈕的設(shè)置,運(yùn)動(dòng)速度的快慢(speed),是否要無限循環(huán),是的話設(shè)置(loop:true),需要自動(dòng)播放的的話設(shè)置(autoplay: 1000),操作了swiper-slide之后是否需要停止切換,默認(rèn)是(autoplayDisableOnInteraction: true),不需要的話(autoplayDisableOnInteraction: false),
Swiper-slide高度需要隨內(nèi)容的多少改變(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需要根據(jù)自己需要的效果自己寫,然后js如下圖:
 

代碼3



另外平時(shí)要是需要Swiper加上一些動(dòng)畫的話,首先需要引入css,如下圖:
 

代碼4



然后在HTML里面找到需要運(yùn)動(dòng)的元素加上樣式名為ani ,swiper-animate-effect(切換的效果)、swiper-animate-duration(持續(xù)的時(shí)間)、swiper-animate-delay(延遲的時(shí)間)也要設(shè)置好。如下圖:
 

代碼5


這樣就能做出一些動(dòng)畫的效果了。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來自http://pdcharm.com/news/5782.html
鲁山县| 湖北省| 龙州县| 邹城市| 桃园县| 大名县| 新邵县| 阆中市| 南开区| 宣武区| 阜新市| 杨浦区| 淮北市| 阜新市| 深水埗区| 平山县| 洛隆县| 威信县| 枣庄市| 西峡县| 郓城县| 乌拉特前旗| 平南县| 昌邑市| 高尔夫| 蓬溪县| 长乐市| 徐水县| 万载县| 吉木萨尔县| 阿拉善盟| 武隆县| 郧西县| 淳化县| 德州市| 察雅县| 土默特右旗| 东港市| 安阳县| 兴山县| 楚雄市|