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

2023-02-26 分類(lèi)：網(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)，是的話(huà)設(shè)置（loop:true），需要自動(dòng)播放的的話(huà)設(shè)置（autoplay: 1000），操作了swiper-slide之后是否需要停止切換，默認(rèn)是（autoplayDisableOnInteraction:true），不需要的話(huà)（autoplayDisableOnInteraction: false），
Swiper-slide高度需要隨內(nèi)容的多少改變（autoHeight: true）等。

代碼1

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

效果1

需要做的輪播效果如下圖:
在html里面需要添加

如下圖：

代碼2

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

代碼3

另外平時(shí)要是需要Swiper加上一些動(dòng)畫(huà)的話(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)頁(yè)題目：swiper視頻+圖片切換與swiper+animate
當(dāng)前鏈接：http://jinyejixie.com/news/239837.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、定制網(wǎng)站、App設(shè)計(jì)、小程序開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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