swiper 集合视频 图片 类似淘宝 产品图切换
2020-04-24 17:14 曾祥展 阅读(471) 评论(0) 编辑 收藏 举报swiper 集合视频 图片 类似淘宝 产品图切换
基于 https://swiperjs.com/api/ 5.0+版本
//短视频 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 }