返回新闻列表

Swiper轮播图视频加图片混合，完美解决方法，

发布日期: 2024-08-19 | 来源: 智软设计工作室 

Swiper轮播图视频加图片混合，完美解决方法，还加入了图片浮动文字动画。下面是代码。测试是比较完美。视频播放玩了。在自动切换到下一个幻灯，

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper轮播图示例</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
       <!-- Swiper slider CSS -->
       <link rel="stylesheet" href="/assets/css/plugins/swiper.min.css">
    <!-- Animate CSS -->
   
       <style>
        .swiper-containervd {
            width: 100%;
            max-height: 750px; overflow: hidden;
        }
   
        .swiper-containervd .swiper-slide {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
   
        .swiper-containervd .swiper-slide img {
            width: 100%;
            height: auto;
        }
   
         .swiper-containervd .swiper-slide video {
     

        position: absolute; /* 绝对定位视频 */
  top: 0;
  left: 0;
  width: 100%; /* 视频宽度 100% */
  height: 100%; /* 视频高度 100% */
  object-fit: cover; /* 视频填满容器并裁剪多余部分 */
    }

   
    /*动画*/
   
        .floating-text {
            position: absolute;
            bottom:45%;
            left: 45%;
            color: #fff;
            text-align: left;
        }
   
   
   
 
        .floating-text h2,
    .floating-text p,
    .floating-text a {
        opacity: 0;
    }
       
   
        .floating-text h2 {
            font-size: 5em; color: #fff;
            margin-bottom: 0.5em;
        }
   
        .floating-text p {
            font-size: 2.2em;color:#fff;
            margin-bottom: 1em;
        }
   
        .floating-text a {
            font-size: 2em;
            color:#fff;        
            text-decoration: underline;
        }
   
     
        .floating-text h2 {
        animation-delay: 0.5s;
    }

    .floating-text p {
        animation-delay: 1s;
    }

    .floating-text a {
        animation-delay: 1.5s;
    }


       
   
     
    </style>  <link rel="stylesheet" href="/assets/css/plugins/animate.min.css">
</head>
<body>

   <!-- Swiper容器 -->
 <div class="swiper-container swiper-containervd">
    <div class="swiper-wrapper">
        <!-- 幻灯片1: 视频 -->
        <div class="swiper-slide">
            <video id="sVideo" muted>
                <source src="shanghai.mp4" type="video/mp4">
                您的浏览器不支持视频标签。
            </video>
        </div>

        <!-- 幻灯片2: 图片 -->
        <div class="swiper-slide" data-swiper-autoplay="5000">
            <a href=""><img src="/assets/slide-3.jpg" alt="图片描述"></a>
            <div class="floating-text">
                <h2 >图片标题</h2>
                <p >图片描述文字提供有关图片的附加信息。</p>
                <a href="#"  >更多详情</a>
            </div>

        </div>


           <!-- 幻灯片2: 图片 -->
           <div class="swiper-slide" data-swiper-autoplay="5000">
           <a href=""> <img src="/assets/slide-3.jpg" alt="图片描述"></a>
            <div class="floating-text">
                <h2  >图片标题</h2>
                <p >图片描述文字提供有关图片的附加信息。</p>
                <a href="#">更多详情</a>
            </div>

        </div>

       


    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 导航按钮 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

   

    <script src="/assets/swiper-bundle.min.js"></script>

    <!--<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>-->
    <script>
       var swiper = new Swiper('.swiper-containervd', {
           loop: true, // 启用循环模式
           autoplay: {
               delay: 5000, // 图片幻灯片的自动切换时间
               disableOnInteraction: false, // 用户交互后是否禁用自动轮播
           },
           pagination: {
               el: '.swiper-pagination', // 分页器
           },
           navigation: {
               nextEl: '.swiper-button-next', // 下一张按钮
               prevEl: '.swiper-button-prev', // 上一张按钮
           },
           on: {
           
               slideChangeTransitionStart: function () {
                   // 在幻灯片切换开始时暂停前一个幻灯片中的视频
                   var previousSlideIndex = swiper.previousIndex;
                   var previousSlide = swiper.slides[previousSlideIndex];
                   if (previousSlide) {
                       var video = previousSlide.querySelector('video');
                       if (video) {
                           video.pause(); // 暂停前一个幻灯片中的视频
                       }
   
                       //处理动画,删除css间隔动画
                       var floatingText = previousSlide.querySelector('.floating-text h2');
                       var floatingTextp = previousSlide.querySelector('.floating-text p');
                       var floatingTexta = previousSlide.querySelector('.floating-text a');
                     

                            if (floatingText) {
                                floatingText.classList.remove('animated', 'fadeInUp'); // 移除动画类
                                floatingTextp.classList.remove('animated', 'fadeInUp'); // 移除动画类
                                floatingTexta.classList.remove('animated', 'fadeInUp'); // 移除动画类
                            }
   
                           
                   }
               },
               slideChangeTransitionEnd: function () {
                   // 在幻灯片切换完成后处理视频播放和文字动画
                   var currentSlide = swiper.slides[swiper.activeIndex];
                   if (currentSlide) {
                       var video = currentSlide.querySelector('video');
                       var floatingText = currentSlide.querySelector('.floating-text h2');
                       var floatingTextp = currentSlide.querySelector('.floating-text p');
                       var floatingTexta = currentSlide.querySelector('.floating-text a');
                       if (video) {
                           video.currentTime = 0; // 将视频重置到开头
                           video.play(); // 播放当前幻灯片中的视频
                           swiper.autoplay.stop(); // 暂时停止自动轮播
                           video.onended = function() {
                               // 视频播放完毕后切换到下一张幻灯片
                               swiper.slideNext();
                               swiper.autoplay.start(); // 重新启动自动轮播
                           };
                       } else {
                           swiper.autoplay.start(); // 如果当前幻灯片不是视频，则恢复自动轮播
                           // 处理文字动画,增加css间隔动画
   
                           if (floatingText) {
                                    floatingText.classList.add('animated', 'fadeInUp');
                                    floatingTextp.classList.add('animated', 'fadeInUp');
                                    floatingTexta.classList.add('animated', 'fadeInUp');
                                }
                         
                       }
                   }
               }
           }
       });
   
       // 确保页面加载完成时，如果第一个幻灯片是视频则播放它
   // 页面加载完成时处理第一个幻灯片
document.addEventListener('DOMContentLoaded', function() {
    var firstSlide = swiper.slides[swiper.activeIndex];
    if (firstSlide) {
        var video = firstSlide.querySelector('video');
        if (video) {
            swiper.autoplay.stop(); // 停止自动轮播
            video.play(); // 播放第一个幻灯片中的视频
            video.onended = function() {
                swiper.slideNext(); // 视频播放完毕后切换到下一张幻灯片
                swiper.autoplay.start(); // 重新启动自动轮播
            };
        }
        else {//如果是图片
                           swiper.autoplay.start(); // 如果当前幻灯片不是视频，则恢复自动轮播
                           // 处理文字动画,增加css间隔动画
                           var floatingText = firstSlide.querySelector('.floating-text h2');
                       var floatingTextp = firstSlide.querySelector('.floating-text p');
                       var floatingTexta = firstSlide.querySelector('.floating-text a');
                           if (floatingText) {
                                    floatingText.classList.add('animated', 'fadeInUp');
                                    floatingTextp.classList.add('animated', 'fadeInUp');
                                    floatingTexta.classList.add('animated', 'fadeInUp');
                                }
                         
                       }


    }
});
    </script>
     
</body>
</html>


上一篇:Ajax发送订单信息,会遇到发送了一次，然后在点击发送，不成功的问题， 下一篇:pbootcms 判断电脑版和手机版 ，直接程序判断增加自定义标签函数

推荐技术资料

PBootcms权限提示跳转时间和文字修改，栏目加权限错误提示修改

2025-03-07

pb有时候给栏目加权限的时候，提示权限默认是2s页面跳转 有点麻烦，甚至不想要这个跳转提示页面按照路径找到 /core/function/handle.php把默认的1000改成你需要的时间 1000是1s 0就是直接跳转，但是0在直接跳转时候 会有一个页面马上闪烁跳转，可以把这个页面暂时display: none。找到路径 /core/template/error.html找到之后

阅读更多

css字体渐变颜色和背景渐变颜色实现方法

2023-05-09

css字体渐变颜色background-image:-webkit-linear-gradient(bottom,#fb1919,#fd8403,#75751e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;这里要注意。如果设置了这个。css字体移动样式也要设置。不然普通字体移动变色。没有效果，css背景渐变颜色代码如下:background-image: linear-gradient(140d

阅读更多

pbootcms系统框架的提示语 多语言修改与判断，多数据区域提示语修改

2024-06-15

比如我们要改您访问的页面不存在，请核对后重试这个提示语，打开如下。\apps\home\controller/IndexController.php如果你是单语言那就直接改文字就行了。如果是多语言，多数据区域，那就要先获取语言 cookie然后判断，因为官网默认是cookie做多语言的。如下是代码。$lg=cookie('lg');&nb

阅读更多

pbootcms首页写php代码判断是否国内ip，免费的ip查询api

2023-06-16

直接在模板里面写<?php代码写php， 测试可用，<?php$ip=$_SERVER['REMOTE_ADDR'];//http://ip-api.com/json/221.111.209.125?lang=zh-CN$content=file_get_contents('http://ip-api.com/json/'.$ip.'?lang=zh-CN&#

阅读更多

win10无法连接xp电脑共享打印机解决办法和链接方法

2022-04-07

今天公司换了新电脑，发票打印机。还在老电脑里面。没动，要共享出来，但是发现win10 怎么都没法链接xp的共享打印机，后来网上找了个解决方法。如下。第一，Win10添加SMB 1.0支持1、打开控制面板，点击程序和功能2、点击启用或关闭Windows功能选项4、勾选SMB 1.0/CIFS File Sharing Support 选项，确定5、安装完SMB 1.0支持

阅读更多

不一样的解决方法 windows iis+php5.4+php7.1 偶然出现500错误 意外进程退出

2024-01-04

先说下我这边遇到的情况。环境是windows2012 iis +php5.4+php7.1，然后安装了d盾和安全狗服务器版本，老是出现php网站偶然或者突发性500错误（http错误500.0 FastCGI进程意外退出怎么办?）刷新一下（重启iis）又能访问，然后开始网上找原因，都是说一些Visual C++、和应用池的设置，但是经过测试都没法解决。于

阅读更多

pbootcms搜索页面设置不同模板

2023-07-08

<formaction="{pboot:scaction}"method="get">关键字：<inputtype="text"name="keyword"><inp

阅读更多

console-ban插件实现禁止F12，HTML屏蔽F12、右键、开发者工具、审查元素

2022-07-19

（该方法有效禁止F12，强行打开会重定向到自己定义的页面去，可以直接引入js，或者你下载放自己服务器上）<scriptsrc="https://www.lcean.cf/js/console-ban.min.js"></script>//引用方法<script>//default&nb

阅读更多

SQLite 查询本月的数据和查询多少天之内的数据

2021-11-24

SQLite 查询本月的数据select *from ay_diy_jingxiaoshangwhere create_time between datetime('now','start of month','+1 second') anddatetime('now','start of month','+1 month','-1 second')查询多少天之内的数据，查询365天select *from ay_di

阅读更多