使用swiper制作視頻加圖片較完美結合的輪播圖

2023-02-20 分類：網站建設

Swiper是一個功能強大的前端工具，可以制作酷炫的輪播圖和全屏滾動網頁。在前陣子項目需要做一個視頻加圖片結合的輪播圖，而我卻沒有找到合適的案例來做這個輪播圖，只好自己動手嘗試做一個出來。

輪播圖的需求是，如何在自動輪播的情況下，做到視頻和圖片好結合的效果。并使其做到，背景視頻播放完，自動切換為下一屏。提供本人的思路：先確認當前屏幕是視頻還是圖片；當其為圖片時，3秒后自動切換下一屏；當其為視頻時，獲取其播放狀態，當它是播放時，輪播圖不切換；當它結束播放時，輪播圖自動切換下一屏。最后，使用左右按鈕或點擊頁碼，也可讓視頻播放或圖片自動切換。放上代碼：1,html代碼：

//第一屏代碼，為背景視頻

//第二屏代碼，為背景圖片

//頁碼

2，js代碼：$(function() {
var swiper1 = new Swiper('#sw1 .swiper-container', {
pagination: '#sw1 .swiper-pagination',
paginationClickable: true,
speed: 1000, //輪播時使用時間
loop: true, //自動輪播
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
autoplay: 3000,
noSwiping: true,
effect: 'fade', //使用3d效果，淡入淡出，讓輪播更加自然
//切換下一屏時，運行的代碼
onTransitionEnd: function(swiper) {
//判斷當前輪播屏是否為視頻
if($(".swiper-slide-active .item").children().hasClass('banner-video')) {
//自動播放當前頁面的視頻
$('.swiper-slide-active video')[0].play();
swiper.stopAutoplay();//停止輪播圖輪播
swiper.params.autoplay = 1000; //輪播圖輪播時秒數
}
}
});
//js開始加載時，查看第一屏（當前屏）是否為視頻
$(".swiper-slide-active video").on('play', function() {
swiper1.stopAutoplay(); //停止輪播圖輪播
})
$('.swiper-slide-active video')[0].play(); //視頻開始播放
);
})；
//myfun（）函數與html結合，做到，查看視頻播放狀態，當視頻播放完時，運行此函數
function myfun() {
swiper1.startAutoplay(); //輪播圖開始自動播放
swiper1.params.autoplay = 3000; //輪播圖自動播放時秒數為3秒
$('.swiper-slide video')[0].pause(); //所有背景視頻停止播放
}為什么說是較好呢？如果人為去點擊移下一屏的話，未移動前的當前屏是視頻背景時，會出現視頻輪播沒停止的問題。所以，這邊我用了css3的淡入淡出效果；這樣視頻或者圖片的過渡會自然些，選擇去掉滑動效果的原因是，會減少人為滑動下一屏的問題的出現幾率。

最后，放上本次項目的實現效果演示，也就是客戶的網站（pc可看見效果，移動端輪播圖效果與pc不一樣哦）。

分享文章：使用swiper制作視頻加圖片較完美結合的輪播圖
本文來源：http://m.kartarina.com/news/238263.html

成都網站建設公司_創新互聯，為您提供ChatGPT、云服務器、電子商務、定制網站、域名注冊、網站維護

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容