swiper 集合视频 图片 类似淘宝 产品图切换
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 }