swiper视频+图片 响应式代码demo 自动判断动画时间

2014已经悄然到来,在新的一年我们恭贺所有客户事业红红火火,同事庆祝智软设计公司成立5周年,在5周年为众多客户提供了保质量的网站制作与网站建设。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站制作与服务!期待与你合作 智软设计公司多年为宁波企业官网制作建设服务一直以来我们以最特价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站制作,宁波企业网站建设,宁波网站建设,宁波seo优化,宁波英文网站建设我们会以优质的服务,最低的价格来报答客户! 点击连接seo优化推广-对企业的seo优化和网络推广--对企业的必要性-点击进行详细了解 2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格 智软设计工作为宁波客户网站制作经典案例平台-案例均为定期更新,让新老顾客更好的看到我们做的案例,点击查看我们做的网站案例吧! 智软(宁波网络科技公司)帮你轻松解决网络问题,网站一站式解决方法
你当前的位置:智软个人工作室 > 营销与网络 > swiper视频+图片 响应式代码demo 自动判断动画时间
    meta charset= UTF-8     title swiper视频+图片 响应式代码demo 自动判断动画时间 /title     link rel= stylesheet href= ajax/libs/Swiper/3.4.2/css/swiper.css     link rel= stylesheet href= ajax/libs/Swiper/3.4.2/css/swiper.min.css     style        /* .banner-container{margin: 0 auto;position: relative;}*/    /*响应式配置*/ .swiper-slide{height:1px} /* 随意指定一个height值即可 */    .swiper-slide-active { height:auto}         .banner-container .swiper-slide *{height: 100%;width: 100%;}     /style /head body div '.banner-container', {         pagination: '.swiper-pagination',         paginationClickable: true,         nextButton: '.swiper-button-next',         prevButton: '.swiper-button-prev',         observer:true,         observeParents:true,         autoplay:3500,         loop:true,         speed:800,         onSlideChangeStart: function(Swiper1){             // 暂停所有视频              var videos = document.getElementsByTagName('video');                 for (var i = videos.length - 1; i i--) {                     (function(){                         var p = i;                         videos[p].addEventListener('play',function(){                             pauseAll(p);                         })                     })()                 }                 function pauseAll(index){                     for (var j = videos.length - 1; j j--) {                         if (j!=index) videos[j].pause();                     }                 };             // 判断swiper-slide-active是否有视频             if($( .banner-container .swiper-slide-active video ).length 0){                 // 停止自动切换                 Swiper1.stopAutoplay();                 // 动态增加id                 $( .banner-container .swiper-slide-active video ).attr( id , video_01                   var _video=document.getElementById( video_01                                 // 播放歌曲                 _video.play();                 // 切换后重新播放歌曲                 _video.currentTime = 0;                 // 静音                 _video.volume = 0;                 // 监听视频在线观看结束                 _video.addEventListener('ended', function () {                      Swiper1.slideNext();                     //从头开始轮播banner                     Swiper1.startAutoplay();                 });             }         },         onSlideChangeEnd: function(Swiper1){             //动态移除id             $( .banner-container .swiper-slide-active video ).attr( id ,         }     });       /script /body /html

相关阅读