Swiper是一個功能強大的前端工具,可以制作酷炫的輪播圖和全屏滾動網(wǎng)頁。在前陣子項目需要做一個視頻加圖片結(jié)合的輪播圖,而我卻沒有找到合適的案例來做這個輪播圖,只好自己動手嘗試做一個出來。
輪播圖的需求是,如何在自動輪播的情況下,做到視頻和圖片好結(jié)合的效果。并使其做到,背景視頻播放完,自動切換為下一屏。提供本人的思路: 先確認當前屏幕是視頻還是圖片; 當其為圖片時,3秒后自動切換下一屏; 當其為視頻時,獲取其播放狀態(tài),當它是播放時,輪播圖不切換;當它結(jié)束播放時,輪播圖自動切換下一屏。 最后,使用左右按鈕或點擊頁碼,也可讓視頻播放或圖片自動切換。放上代碼:1,html代碼:
<div id="sw1" class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
//第一屏代碼,為背景視頻
<div class="swiper-slide swiper-no-swiping">
<a class="item">
<div class="banner-video">
<video class="banner-background" src="images/2.mp4" style="width: 100%; object-fit: fill" poster="" muted="" onended="myfun()" autoplay="true">
<source src="images/2.mp4" type="video/mp4">
</video>
</div>
</a>
</div>
//第二屏代碼,為背景圖片
<div class="swiper-slide swiper-no-swiping" style="background:url(images/banner-1.jpg) center center no-repeat;">
</div>
</div>
//頁碼
<div class="swiper-pagination"></div>
</div>
</div>
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; //輪播圖輪播時秒數(shù)
}
}
});
//js開始加載時,查看第一屏(當前屏)是否為視頻
$(".swiper-slide-active video").on('play', function() {
swiper1.stopAutoplay(); //停止輪播圖輪播
})
$('.swiper-slide-active video')[0].play(); //視頻開始播放
);
});
//myfun()函數(shù)與html結(jié)合,做到,查看視頻播放狀態(tài),當視頻播放完時,運行此函數(shù)
function myfun() {
swiper1.startAutoplay(); //輪播圖開始自動播放
swiper1.params.autoplay = 3000; //輪播圖自動播放時秒數(shù)為3秒
$('.swiper-slide video')[0].pause(); //所有背景視頻停止播放
}為什么說是較好呢?如果人為去點擊移下一屏的話,未移動前的當前屏是視頻背景時,會出現(xiàn)視頻輪播沒停止的問題。所以,這邊我用了css3的淡入淡出效果;這樣視頻或者圖片的過渡會自然些,選擇去掉滑動效果的原因是,會減少人為滑動下一屏的問題的出現(xiàn)幾率。
最后,放上本次項目的實現(xiàn)效果演示,也就是客戶的網(wǎng)站(pc可看見效果,移動端輪播圖效果與pc不一樣哦)。
當前標題:使用swiper制作視頻加圖片較完美結(jié)合的輪播圖
文章來源:http://m.rwnh.cn/news13/238263.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、品牌網(wǎng)站制作、面包屑導航、網(wǎng)站排名、網(wǎng)站導航、標簽優(yōu)化
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)