内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

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

2023-02-26    分類: 網(wǎng)站建設(shè)

之前遇到在項(xiàng)目中需要做一個(gè)視頻播放+圖片的自動(dòng)切換輪播,需要視頻播放完成之后再切換下一張圖片。我是用swiper的,先按照自動(dòng)輪播圖片那樣做,設(shè)置好swiper的一些屬性,例如:分頁(yè)器(pagination: '.swiper-pagination'),分頁(yè)器是否換圖,需要換圖(paginationClickable :true),前進(jìn)后退按鈕的設(shè)置,運(yùn)動(dòng)速度的快慢(speed),是否要無(wú)限循環(huán),是的話設(shè)置(loop:true),需要自動(dòng)播放的的話設(shè)置(autoplay: 1000),操作了swiper-slide之后是否需要停止切換,默認(rèn)是(autoplayDisableOnInteraction:true),不需要的話(autoplayDisableOnInteraction: false),
Swiper-slide高度需要隨內(nèi)容的多少改變(autoHeight: true)等。

代碼1

在開(kāi)始做之前就需要先引入css和js,如圖:

效果1

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

代碼2

Css需要根據(jù)自己需要的效果自己寫(xiě),然后js如下圖:

代碼3

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

代碼4

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

代碼5

網(wǎng)站題目:swiper視頻+圖片切換與swiper+animate
URL地址:http://www.rwnh.cn/news37/239837.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化建站公司、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
梧州市| 库伦旗| 岗巴县| 嫩江县| 涟水县| 容城县| 宝应县| 翁源县| 英超| 龙门县| 准格尔旗| 集安市| 定远县| 罗江县| 泸水县| 松滋市| 临泽县| 海晏县| 东平县| 河南省| 云南省| 南昌市| 秦安县| 岐山县| 青阳县| 长治县| 环江| 木兰县| 辰溪县| 罗甸县| 百色市| 疏附县| 敦化市| 丰城市| 白银市| 佛冈县| 敦煌市| 永兴县| 荣昌县| 峨眉山市| 平邑县|