0
点赞
收藏
分享

微信扫一扫

swiper 集合视频 图片 类似淘宝 产品图切换

swiper 集合视频 图片 类似淘宝 产品图切换 基于 https://swiperjs.com/api/ 5.0+版本

swiper 集合视频 图片 类似淘宝 产品图切换

基于 ​​https://swiperjs.com/api/​​ 5.0+版本

swiper 集合视频 图片 类似淘宝 产品图切换_视频图片


//短视频
if (res.VideoJson && res.VideoJson.length > 10) {

hasSwiperVideo = true;

var vd = JSON.parse(res.VideoJson);
html += '<div class="swiper-slide swiper-video" >';

html += '<div class="video-poster" style="background-image: url(' + v.cropimg+')">';
html += '<div class="video-play" data-w="' + vd.w +'" data-h="'+vd.h+'" data-svid="' + vd.svid + '" data-cover="' + vd.cover + '" data-playurl="' + vd.video_url + '" ></div>';
html += '<div class="video-duration">' + vd.time+'</div>';
html += '</div>';
html += '</div>';

}


var topSwiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
bulletElement:'i',
type: 'custom',
clickable: false,
renderCustom: function (swiper, current, total) {
var text = '';
for (var i = 1; i <= total; i++) {
var className = current == i ? 'current' : '';
if (i == 1) {
text += '<i class="videotag ' + className + '"><span class="videos">视频</span><span class="images">图片</span></i>';
}
else {
text += '<i class="' + className + '"><span class="pagination">' + (current -1) + '/' + (total -1)+ '</span></i>';
}
}
return text;

}

},
preventClicksPropagation: true,
on: {
slideChange: function () {

if ($('.video-controls').length>0) {
if (this.activeIndex == 0) {
$('.video-controls').trigger("play");
$('.video-status').removeClass('item-video-play');
} else {
$('.video-controls').trigger("pause");
$('.video-status').addClass('item-video-play');
}
}


},
},

});




$('.swiper-container').on('click', '.swiper-pagination .videos,.swiper-pagination .images', function (e) {
var i = $(this);
if (i.hasClass("videos")) {
topSwiper.slideTo(0);
if ($('.video-controls').length > 0) {

if ($('.video-status').hasClass("item-video-play")) {
$('.video-controls').trigger("play");
$('.video-status').removeClass('item-video-play');
}
else {
$('.video-controls').trigger("pause");
$('.video-status').addClass('item-video-play');

}
}
}
else {
topSwiper.slideTo(1);
}


});




//短视频
$('.video-play').off().on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var t = $(this), svid = t.attr('svid'), playurl = t.attr('data-playurl'), cover = t.attr('data-cover'), w = t.attr('data-w'), h = t.attr('data-h');
if (isInMiniProgram && svid) {
parent.wx.miniProgram.navigateTo({ url: ''});

} else {
var sw = screen.width;
var vh = sw / w * h;
if (vh > sw) {
vh = sw;
}
var tt = '<video class="video-controls" height="' + vh +'" autoplay="autoplay" loop="loop" src="' + playurl + '" poster="' + cover + '" playsinline="true" webkit-playsinline="true" preload="auto"></video>';
tt += '<div class="video-status"></div>';
t.parent().parent().html(tt);

$('.video-controls,.video-status').off().on("click", function (e) {
e.preventDefault();
e.stopPropagation();

if ($('.video-status').hasClass("item-video-play")) {
$('.video-controls').trigger("play");
$('.video-status').removeClass('item-video-play');
}
else
{
$('.video-controls').trigger("pause");
$('.video-status').addClass('item-video-play');

}

})

}
});
.swiper-video{display: -webkit-box; 
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0;
overflow: hidden; background: #000;}
.video-controls{ width: 100%; background: #000; left: 0; top: 0; border: 0;}
.video-poster{ width: 100%; height: 100%; text-align: center; margin: auto; z-index: 2;}
.swiper-slide .video-play{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 3;}
.swiper-slide .video-play::after{ content: "";position: absolute; left: 48%; top: 45%;width: 70px; height: 70px;margin-left:-25px;margin-top:-25px; background:url('../images/video-play.png');background-size: cover;}
.video-duration{position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; font-size:12px; color:#fff; background: rgba(0,0,0,.5); line-height: 14px; padding: 2px 4px; z-index: 3; -webkit-border-radius: 30px; border-radius: 30px; left: 10px; bottom: 10px;}
.video-status{opacity:0;position: absolute; left: 48%; top: 45%;width: 70px; height: 70px;margin-left:-25px;margin-top:-25px; background:url('../images/video-play.png');background-size: cover;}
.video-status.item-video-play{opacity:1}
.swiper-pagination {
position: absolute;
text-align: center;
left: 30px;
right: 30px;
bottom: 10px;
font-size:12px;
}

.swiper-pagination .current {
background-color: #aaa;
opacity: 1;
color: #fff
}

.swiper-pagination .current:first-child:last-child {
opacity: 0
}

.swiper-pagination i {
border-radius: 4.5px;
margin: 0 4px;
color: #000;
height: 0;
display: block
}

.swiper-pagination .pagination {
position: absolute;
bottom: 0;
right: 10px;
display: none;
background-color: rgba(100,100,100,.6);
border-radius: 10px;
padding: 0 10px;
line-height: 20px;
height: 20px;
color: #fff;
margin:0px;
}

.swiper-pagination .images,.swiper-pagination .videos {
border-radius: 10px;
line-height: 20px;
height: 20px;
display: inline-block
}

.swiper-pagination .images {
background: #FF0036;
padding: 0 10px;
color: #fff;
margin-left: 10px
}

.swiper-pagination .videos {
background: rgba(240,240,240,.8);
padding: 0 10px 0 15px;
color: #333;
position: relative
}

.swiper-pagination .videos:before {
content: "";
-webkit-backface-visibility: hidden;
position: absolute;
left: 8px;
top: 5px;
width: 0;
height: 0;
border-width: 5px;
border-style: dashed;
border-color: transparent transparent transparent #333;
font-size: 0;
line-height: 0
}

.swiper-pagination .videotag {
background: 0 0;
height: 30px
}

.swiper-pagination .current .videos {
background: #FF0036;
color: #fff;

}

.swiper-pagination .current .videos:before {
border-color: transparent transparent transparent #fff
}

.swiper-pagination .current .images {
background: rgba(240,240,240,.8);
color: #333;

}

.swiper-pagination .current .pagination {
display: block
}





举报

相关推荐

0 条评论