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
}