智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

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

2020-03-21 11:30

 <!DOCTYPE html>

<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>swiper视频+图片 响应式代码demo 自动判断动画时间</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/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 class="swiper-container banner-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ad1966bd607.jpg" alt=""></a></div>
        <div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7abf5d336294.jpg" alt=""></a></div>
        <div class="swiper-slide"><video src="https://zhkj.evergrande.com/static/img/index/3.06M.mp4" preload="auto" style="width: 100%;height:640px; object-fit: fill"></video></div>
        <div class="swiper-slide"><a href=""><img src="Uploads/5e5f7ac7c43299548.jpg" alt=""></a></div>
        
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script>
$(function(){
    var Swiper1 = new Swiper('.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 >= 0; i--) {
                    (function(){
                        var p = i;
                        videos[p].addEventListener('play',function(){
                            pauseAll(p);
                        })
                    })()
                }
                function pauseAll(index){
                    for (var j = videos.length - 1; j >= 0; 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>
更多

【责任编辑:小戴工程师】

关键字: 外链策略 LIKE模糊查询问题 360安全聊士 百度收录 DIV高度自动 网站制作技巧 做站长 是真是假 Wifi 垃圾SEO 网站内容 甲骨文 功能 宁波妙力斯 网页设计 网站权重 满足客户 大型网站制作 新备案系统 顾客 cctv央视官网被黑 sem 博客如何注册 添加技巧 实例 Undefined variable 织梦 没光标解决方法 内页标题 移动网页设计

上一篇:dede模板直接读取上传附件图片代码 按照id获取 下一篇:iis8 导入证书方法 和 .crt .key文件怎么转换为.pfx教程

最新文章

2020-03-21 11:30

相关文章

2020-03-21 11:30
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!