国产精品 久久久精品动漫网站_欧美日韩久久中文字幕_国产亚洲精品日韩在线tv黄_国产农村一级毛片精品_日本国产中文字幕_任我爽橹在线视频精品583_最近中文字幕mv免费高清视频8_色爽交永久免费视频_国产精品三区第二页_亚洲春色在线观看

之前遇到在項(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里面需要添加

如下圖：

代碼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)畫的效果了。