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

Swiper是一個(gè)功能強(qiáng)大的前端工具，可以制作酷炫的輪播圖和全屏滾動(dòng)網(wǎng)頁(yè)。在前陣子項(xiàng)目需要做一個(gè)視頻加圖片結(jié)合的輪播圖，而我卻沒(méi)有找到合適的案例來(lái)做這個(gè)輪播圖，只好自己動(dòng)手嘗試做一個(gè)出來(lái)。</div>
2，js代碼：$(function() {
var swiper1 = new Swiper('#sw1 .swiper-container', {
pagination: '#sw1 .swiper-pagination',
paginationClickable: true,
speed: 1000, //輪播時(shí)使用時(shí)間
loop: true, //自動(dòng)輪播
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
autoplay: 3000,
noSwiping: true,
effect: 'fade', //使用3d效果，淡入淡出，讓輪播更加自然
//切換下一屏?xí)r，運(yùn)行的代碼
onTransitionEnd: function(swiper) {
//判斷當(dāng)前輪播屏是否為視頻
if($(".swiper-slide-active .item").children().hasClass('banner-video')) {
//自動(dòng)播放當(dāng)前頁(yè)面的視頻
$('.swiper-slide-active video')[0].play();
swiper.stopAutoplay();//停止輪播圖輪播
swiper.params.autoplay = 1000; //輪播圖輪播時(shí)秒數(shù)
}
}
});
//js開(kāi)始加載時(shí)，查看第一屏（當(dāng)前屏）是否為視頻
$(".swiper-slide-active video").on('play', function() {
swiper1.stopAutoplay(); //停止輪播圖輪播
})
$('.swiper-slide-active video')[0].play(); //視頻開(kāi)始播放
);
})；
//myfun（）函數(shù)與html結(jié)合，做到，查看視頻播放狀態(tài)，當(dāng)視頻播放完時(shí)，運(yùn)行此函數(shù)
function myfun() {
swiper1.startAutoplay(); //輪播圖開(kāi)始自動(dòng)播放
swiper1.params.autoplay = 3000; //輪播圖自動(dòng)播放時(shí)秒數(shù)為3秒
$('.swiper-slide video')[0].pause(); //所有背景視頻停止播放
}為什么說(shuō)是較好呢？如果人為去點(diǎn)擊移下一屏的話，未移動(dòng)前的當(dāng)前屏是視頻背景時(shí)，會(huì)出現(xiàn)視頻輪播沒(méi)停止的問(wèn)題。所以，這邊我用了css3的淡入淡出效果；這樣視頻或者圖片的過(guò)渡會(huì)自然些，選擇去掉滑動(dòng)效果的原因是，會(huì)減少人為滑動(dòng)下一屏的問(wèn)題的出現(xiàn)幾率。

當(dāng)前標(biāo)題：使用swiper制作視頻加圖片較完美結(jié)合的輪播圖
文章來(lái)源：http://www.muchs.cn/news13/238263.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化

廣告

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