轮播图中播放视频兼容处理

{"isShowVideo":"1","videolist":[ {"desc":"000","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"00","url":"","img":"images/image1.png"}, {"desc":"11","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"22","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"33","url":"images/video.mp4","img":"images/image1.png"}], "size":"5"}

轮播图中放视频一个盒子放数据另一个盒子放视频和图片

    <!--上方轮播-->
            <div class="swipercov">
                <div class="covin">
                    <h2>全国最美程序员评选</h2>

    <div id="videoListJson" style="display:none">
      {"isShowVideo":"1","videolist":[
      {"desc":"000","url":"images/video.mp4","img":"images/image1.png"},
      {"desc":"00","url":"","img":"images/image1.png"},
      {"desc":"11","url":"images/video.mp4","img":"images/image1.png"},
      {"desc":"22","url":"images/video.mp4","img":"images/image1.png"},
      {"desc":"33","url":"images/video.mp4","img":"images/image1.png"}],
      "size":"5"}
    </div>
        <div class="media-poll">
          <div class="swiper-video" id="swiper-video">
            <!--视频列表将生成在此div内-->
            <div class="swiper-wrapper" id="swiper-wrapper">

            </div>
          </div>
          <!--这是swiper的点-->
          <div class="swiper-pagination swiper-pagination1"></div>
    </div>
    <div class="toldu">
            <h4>我想对你说</h4>
            <p>每天进步一点点，我相信星星之火可以燎原！喜欢投我一票吧~</p>
    </div>

                </div>
            </div>
            <!--上方轮播end-->

/*播放视频*/

var videoSwiper;//申明全局swiper
function playVideo($obj){//播放选中视频(选中swiper对象)
    var videoActive = $obj.find("video").eq(0)[0];//当前video对象
    var videoPoster = $obj.find(".posterBg");//当前封面对象
    videoPoster.hide();
    videoActive.play();
    var activeIndex = videoSwiper.activeIndex;//第几个video
    if(activeIndex == 1|| activeIndex ==length-1){
        $(".posterBg").eq(length-1).hide
();
        $(".posterBg").eq(1).hide();
    }
}
var swiperWrapper = $("#swiper-video").find("#swiper-wrapper");
var  mediapoll = $(".media-poll");
var jdata = JSON.parse($("#videoListJson").text());
if(jdata!=undefined && jdata!=null && jdata!="" && Number(jdata.size)>0){/*有视频数据*/
    console.log(jdata);
    var videolist = jdata.videolist;
    var size = jdata.size;
    if(size>0){
        mediapoll.show();
    };
    //创建视频的描述、地址、封面的3个数组
    var desc = [];
    var url = [];

var img =[];
    if(size <=1 && swiperWrapper){
        swiperWrapper.removeClass("swiper-wrapper");
    }else if(size > 1 && 

swiperWrapper.not("swiper-wrapper")){
        swiperWrapper.addClass("swiperWrapper");
    }
    for(var i = 0 ;i < videolist.length ;i++ ){
        desc.push(videolist[i].desc);
        url.push(videolist[i].url);
        img.push(videolist[i].img);
    }
    //将数据全部append到dom中
    for(var j = 0 ;j < desc.length ;j++){
        if(url[j]){
                var slide = ‘<div class="swiper-slide">‘ +"<div class=‘posterBg‘ image=‘url("+img[j]+")‘ style=‘background-image:url("+img[j]+")‘>"+‘<img class="starticon" src="./images/playbutt.png"/>‘+"</div>"+"<div class=‘video-bg‘>"+‘<video style="z-index:1" controls="controls" x5-playsinline="" playsinline="" webkit-playsinline="" preload="auto" poster="‘+img[j]+‘"src="‘+url[j]+‘">‘+‘</video>‘+‘<div class="topLogo"></div>‘+"</div>"+‘</div>‘;
        }else {
                var slide = ‘<div class="swiper-slide">‘+ ‘<img src=‘+img[j]+‘>‘+‘</div>‘;
        }

        swiperWrapper.append(slide);
    }
var videoBor = $(".swiper-slide");//video的swiper对象数组
    var videolist = videoBor.find("video");//video对象数组
    if($(".swiper-video")){
        //渲染swiper效果
        videoSwiper = new Swiper(".swiper-video",{
            autoplay:3000,
            followFinger:false,
            loop:true,
            pagination:‘.swiper-pagination1‘,
            autoplayDisableOnInteraction:false,
            onSlideChangeEnd: function(swiper){
        //轮播时暂停所有视频
                for(var k = 0 ;k<videolist.length;k++){videolist[k].pause();
                }
            }
        });
        //重新获取video的swiper对象数组
        var videoBor = $(".swiper-video .swiper-slide");
        var length = videoBor.length;
        /*点击单个swiper事件*/
        videoBor.on("click",function(){
            videoSwiper.stopAutoplay();
            var _this=this;
            var $video = $(this).find("video");
            if($video[0].paused){
playVideo($(_this));
            }
        });
        var videolist = videoBor.find("video");//video对象数组
        /*暂停时事件*/
        videolist.on("pause",function(){
            /*所有封面浮层show&所有视频hide*/
        videoBor.find(".posterBg").show();
            videoBor.find("video").hide();
    var index =  videoSwiper.activeIndex;
            if(index == 1 || index == length-1){
var timeall = $(this)[0].currentTime;
                videolist[0].currentTime = timeall;
videolist[length-1].currentTime = timeall;
            };
            if($(this)[0].paused){
videoSwiper.startAutoplay();
            }
        });
        /*播放时事件*/
        videolist.on("play",function(){
            /*当前视频show*/
            $(this).show();
if($(this)[0].play){
                videoSwiper.stopAutoplay();
            }
        });
        /*停止时事件*/
        videolist.on("ended",function(){
            /*所以封面浮层show&所以视频hide*/
videoBor.find(".posterBg").show();
            videoBor.find("video").hide();
        });
    }
}else{/*无视频数据*/

$(".media-poll").hide();/*隐藏导读*/
}
/*上方轮播*/

less

//上方轮播
.swipercov {
    margin-top: 0.3rem;
    padding: 0 .2rem;
}
.covin {
    h2{
        line-height: 1rem;
        padding-left: 0.3rem;
        font-size: 0.3rem;
        background-color: #fff;
    }
}
/*视频样式*/

.liuliangbof .pop_c .pop_text .px14 {
    font-size: 14px;
}

.liuliangbof .pop_c .pop_btn {
    display: flex;
}

.swiper-slide .video-bg video {
    background-color: #000;
}

.progressWrap-box .progressWrap {
    border: 1px solid #12bfc3;
    background-color: #12bfc3;
}

/*使用div挡住大进度条来处理兼容问题*/

.progressWrap-box .progressWrap {
    border-top: 10px solid #12bfc3;
    background: red;
}

.swiper-slide .audioSlide {
    height: 57px;
}
//
//@media (min-width:321px) and (max-width:1080px) {
//  .swiper-slide .audioSlide {
//      height: 69px;
//  }
//}

.media-poll {
    padding: 0 18px 26px;
    position: relative;
    background: #fff;
//  margin: -3px 0 8px;
}

.media-poll .swiper-video video {
    width: 100%;
    position: relative;
    height: 5.86rem;
}

.media-poll .swiper-video img {
    width: 100%;
    height: 5.86rem;
}

.media-poll .swiper-video {
    position: relative;
    overflow: hidden;
}

.media-poll #swiper-wrapper {
    position: relative;
}

.media-poll .posterBg {
    background-size: 100% 100%;
    width: 100%;
    height: 5.86rem;
    z-index: 8;
    position: absolute;
    text-align: center;
    line-height: 160px;
}

.media-poll .swiper-video .posterBg .starticon {
    width: 44px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.media-poll .swiper-pagination {
    width: auto;
    right: 0;
    left: 0;
    bottom: 0.1rem;
}

.media-poll .sping-daodu {
    padding: 13px 0 4px;
    font-size: 14px;
    color: #323232;
}

.media-poll .swiper-slide .video-description {
    font-size: 12px;
    color: #a3a3a3;
    padding-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-poll .swiper-pagination .swiper-pagination-bullet {
    margin-left: 1px;
}

.media-poll .swiper-pagination .swiper-pagination-bullet-active {
    background: #6ac7c9;
}

.media-poll .topLogo {
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 0px;
    height: 31px;
    background-image: -webkit-gradient(linear, top, bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.media-poll .topLogo img {
    position: relative;
    float: right;
    width: 43px;
    margin: 7px 14px 0px 7px;
}

.media-poll .video-bg {
    position: relative;
    height: 5.86rem;
}

    .media-poll .swiper-video video {
        width: 100%;
    height: 5.86rem;
    }
    .media-poll .posterBg {
         height: 5.86rem;
        z-index: 8;
        line-height: 188px
    }
    .media-poll .swiper-pagination {
        width: auto;
        right: 16px;
        margin-top: 3px
    }
    .media-poll .sping-daodu {
        padding: 15px 0 5px;
        font-size: 16px;
    }
    .media-poll .swiper-slide .video-description {
        font-size: 14px;
        padding-bottom: 7px
    }
    .media-poll .swiper-pagination .swiper-pagination-bullet {
        margin-left: 1px;
    }
    .media-poll .topLogo {
        position: absolute;
        width: 100%;
        height: 36px;
        top: 0px;
        background-image: -webkit-gradient(linear, top, bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }
    .media-poll .topLogo img {
        width: 50px;
        margin: 8px 17px 0px 8px;
    }

//@media (min-width:376px) and (max-width:1080px) {
//  .media-poll {
//      padding: 0 23px 33px;
//      margin: -3px 0 10px
//  }
//  .media-poll .swiper-video video {
//      width: 100%;
//      height: 205px
//  }
//  .media-poll .posterBg {
//      background-size: 100% 100%;
//      width: 100%;
//      height: 205px;
//      z-index: 8;
//      line-height: 208px
//  }
//  .media-poll .swiper-pagination {
//      width: auto;
//      right: 18px;
//      margin-top: 3px
//  }
//  .media-poll .sping-daodu {
//      padding: 17px 0 5px;
//      font-size: 18px;
//  }
//  .media-poll .swiper-slide .video-description {
//      font-size: 15px;
//      padding-bottom: 8px;
//  }
//  .media-poll .swiper-pagination .swiper-pagination-bullet {
//      margin-left: 1px;
//  }
//  .media-poll .topLogo {
//      position: absolute;
//      width: 100%;
//      height: 40px;
//      top: 0px;
//      background-image: -webkit-gradient(linear, top, bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
//      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
//  }
//  .media-poll .topLogo img {
//      width: 55px;
//      margin: 9px 19px 0px 9px;
//  }
//  .media-poll .video-bg {
//      height: 205px
//  }
//}

/*swiper 升级 start*/

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.swiper-container-no-flexbox .swiper-slide {
    float: left
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    /*height:100%;*/
    position: relative
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z‘%20fill%3D‘%23007aff‘%2F%3E%3C%2Fsvg%3E");
    left: 10px;
    right: auto
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z‘%20fill%3D‘%23000000‘%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z‘%20fill%3D‘%23ffffff‘%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z‘%20fill%3D‘%23007aff‘%2F%3E%3C%2Fsvg%3E");
    right: 10px;
    left: auto
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z‘%20fill%3D‘%23000000‘%2F%3E%3C%2Fsvg%3E")
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20viewBox%3D‘0%200%2027%2044‘%3E%3Cpath%20d%3D‘M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z‘%20fill%3D‘%23ffffff‘%2F%3E%3C%2Fsvg%3E")
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #c9c9c9;
    opacity: .5
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-white .swiper-pagination-bullet {
    background: #fff
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #11bfc3;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff
}

.swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000
}

.swiper-container-vertical>.swiper-pagination {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate(0, -50%);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet {
    margin: 5px 0;
    display: block
}

.swiper-container-horizontal>.swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-coverflow .swiper-wrapper {
    -ms-perspective: 1200px
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube {
    overflow: visible
}

.swiper-container-cube .swiper-slide {
    pointer-events: none;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px)
}

.swiper-container-cube.swiper-container-vertical .swiper-cube-shadow {
    z-index: 0
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite
}

.swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D‘0%200%20120%20120‘%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20xmlns%3Axlink%3D‘http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink‘%3E%3Cdefs%3E%3Cline%20id%3D‘l‘%20x1%3D‘60‘%20x2%3D‘60‘%20y1%3D‘7‘%20y2%3D‘27‘%20stroke%3D‘%236c6c6c‘%20stroke-width%3D‘11‘%20stroke-linecap%3D‘round‘%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(30%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(60%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(90%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(120%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(150%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.37‘%20transform%3D‘rotate(180%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.46‘%20transform%3D‘rotate(210%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.56‘%20transform%3D‘rotate(240%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.66‘%20transform%3D‘rotate(270%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.75‘%20transform%3D‘rotate(300%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.85‘%20transform%3D‘rotate(330%2060%2C60)‘%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D‘0%200%20120%20120‘%20xmlns%3D‘http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg‘%20xmlns%3Axlink%3D‘http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink‘%3E%3Cdefs%3E%3Cline%20id%3D‘l‘%20x1%3D‘60‘%20x2%3D‘60‘%20y1%3D‘7‘%20y2%3D‘27‘%20stroke%3D‘%23fff‘%20stroke-width%3D‘11‘%20stroke-linecap%3D‘round‘%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(30%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(60%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(90%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(120%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.27‘%20transform%3D‘rotate(150%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.37‘%20transform%3D‘rotate(180%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.46‘%20transform%3D‘rotate(210%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.56‘%20transform%3D‘rotate(240%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.66‘%20transform%3D‘rotate(270%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.75‘%20transform%3D‘rotate(300%2060%2C60)‘%2F%3E%3Cuse%20xlink%3Ahref%3D‘%23l‘%20opacity%3D‘.85‘%20transform%3D‘rotate(330%2060%2C60)‘%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    100% {
        transform: rotate(360deg)
    }
}

.swiper-pagination-bullet {
    margin: 0 5px;
}

.swiperTouch {
    /*margin-top: 10px;*/
    overflow: hidden;
    position: relative;
}

.tbox .swiperTouch {
    margin-top: 0;
}

.swiperTouch .pagination {
    position: absolute;
    bottom: 2px;
    right: 5px;
    z-index: 5
}

.swiperTouch .pagination span {
    margin-right: 5px;
}

.swiperTouch .swiper-slide,
.swiperTouch .swiperimg {
    /*height:107px;*/
    background-size: auto 40%;
}

.swiperTouch .swiper-pagination-bullet,
.swiperTouch .swiper-pagination-bullet-active {
    background: #fff;
}

/*swiper 升级 end*/

//我想对你说
.toldu {
    background-color: #fff;
    padding: 0 0.3rem 0.2rem;
    font-size: 0.3rem;
    h4 {
        margin-bottom: 0.2rem;
    }
}

//上方轮播结束

原文地址：https://www.cnblogs.com/lostu5/p/9295898.html

时间： 2024-09-28 15:49:32

轮播图中播放视频兼容处理的相关文章

CSS——轮播图中的箭头

注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 400px; height: 3

js原生选项（自动播放无缝滚动轮播图）二

今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走的代码,也可以放向左走的代码,然后在js加载的时候先执行一次,保证页面加载的时候轮播图是自动播放的,当然在鼠标悬停在遮罩层的时候我们需要清除这个定时器,让自动播放功能关闭,然后在鼠标再次移出遮罩层的时候再次开启定时器,这样就实现了自动播放的功能.然后今天的轮播图中我添加了开关的功能,这个开关是为了避

用原生的javascript 实现一个无限滚动的轮播图

说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点相同点: 首先页面布局是一样的同样是改变.inner盒子的位置去显示不同的图片不同点: 为了实现无限滚动需要多添加两张重复的图片左右切换和前面的方法有所不同,前面是获取当前的索引值乘以-600px当做位移距离,现在是需要获取当前.inner的位置来加上或者减去-600来实现下面来一步步的去实现轮播图: 首先是html <!DOCTYPE html> <html lang="en"> <

Web前端原生JavaScript浅谈轮播图

1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住轮播的原理,这样才能把一个轮播图完美的呈现出来. 2.废话不多说,请看下面代码 1 //首先我们必须都明确,一个好的运动框架那必须是能够同时承载两种或多种以上需求的,所以我们应该避免单运动框架通过行内样式的局限性,就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,a

web前端技术课程讲解之关于轮播图水平无缝滚动

制作这个简单的轮播图之前,你必须掌握html.css.以及JavaScript中的节点操作,定时器的使用,条件语句的使用以及JS修改样式和动画原理. 轮播图对于网页来说是个常见也可以说是必备的部分,而轮播图的形式也是各式各样,有简约的也有炫酷的.当然,这里我就只说简约的全屏轮播图水平无缝滚动. 首先是给出一个div标签,并且给这个标签设置宽高(宽高要和图片一致,否则给图片设置居中)以及溢出隐藏(overflow:hidden)并设置定位为相对定位(position:relative),然后用一个

js实现轮播图效果

原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div class="container"> <div clas

用 CSS 做轮播图

对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webkit-animation.做出来的效果自己觉得还可以,唯一的不足就是鼠标点击切换 banner 图和指定到某个图.如果项目中不需要切换变换图片的需求,用 css3 做,何尝不是一种办法.不多说,先上代码: html 代码如下: <div class="test"> <a h

js网站轮播图怎么做如何做？鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

轮播图中播放视频 兼容处理

轮播图中播放视频 兼容处理的相关文章

轮播图中播放视频兼容处理

轮播图中播放视频兼容处理的相关文章