完成需求：輪播頁面自動滾動循環播放素材，在視頻頁面自動播放視頻至視頻結束后繼續輪播下一個素材，手動切換時視頻頁暫停播放，切換回來后恢復播放。

1.安裝swiper相關插件

2.在輪播頁面引入

import?{?Swiper,?SwiperSlide?}?from?"vue-awesome-swiper";

import?"swiper/swiper-bundle.css";

import?Swiper2,?{? Autoplay?}?from?"swiper";

Swiper2.use([Navigation,?Pagination,?EffectFade,?Autoplay]);

此處特別注意，自動播放Autoplay 需要單獨引入，因為swiper單獨對Autoplay?進行了打包操作，如果未引入會導致設置自動播放屬性無效

3.輪播結構

<swiperv-if="carouselList.length>0"class="carousel swiper-container"ref="mySwiper"@slideChange="onSlideChange":options="swiperOption"><swiper-slidev-for="item in carouselList":key="item.id"><imgstyle="width:100%;height:100%"v-if="item.fileType=='IMG'":src="item.fileUrl"alt=""><video:ref="'video'+item.seq"autoplay@ended="videoend"style="width:100%;height:100%;object-fit: fill"v-if="item.fileType=='VIDEO'":src="item.fileUrl"></video></swiper-slide></swiper>

對于video標簽，設置寬高后任然會出現高度與設置不匹配的問題，添加object-fit: fill屬性

相關變量設置

swiperOption:?{

????????autoplay:?{

??????????delay:?2000,

??????????stopOnLastSlide:?false,

??????????disableOnInteraction:?false,?//操作swiper后不會停止播放

????????},

????????loop:?true,

????????speed:?1000,

????????initialSlide:?0,

??????},

相關方法

onSlideChange(e)?{

??????this.swiper?=?this.$refs.mySwiper.$swiper;

??????console.log(e.activeIndex);

? ? ? // 由于輪播圖前后無縫隙滾動的實現機制，此處索引會出現大于實際素材長度的個數，第0張實際也是最后一張，最后一張后面的一張實際是第一張

??????if?(e.activeIndex?>?this.carouselList.length)?{

????????this.curindex?=?0;

????????return;

??????}

??????if?(e.activeIndex?==?0)?{

????????this.curindex?=?this.carouselList.length?-?1;

????????return;

??????}

??????this.curindex?=?e.activeIndex?-?1;

??????if?(this.carouselList[e.activeIndex?-?1].fileType?==?"VIDEO")?{

? ? ? ?// 如果當前頁是視頻，停止輪播圖自動切換，如果視頻是暫停狀態，開始播放

????????this.swiper.autoplay.stop();

????????let?videoele?=?this.$refs["video"?+?e.activeIndex][0];

????????if?(videoele.paused)?{

??????????videoele.play();

????????}

??????}?else?{

? ? ? ? // 當前頁是普通圖片，開啟視頻自動輪播，將其他頁面（主要是上一個可能為視頻播放的頁面）正在播放的視頻暫停

????????this.swiper.autoplay.start();

????????this.carouselList.forEach((item,?index)?=>?{

??????????if?(item.fileType?==?"VIDEO")?{

????????????let?videoele?=?this.$refs["video"?+?Number(index?+?1)][0];

????????????videoele.pause();

??????????}

????????});

??????}

????},

總結

以上是生活随笔為你收集整理的使用swiper实现视频和图片混合轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。