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

发布人：鲸弘科技

发布时间：2026-01-28

浏览量：6 次

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>

推荐专题

用PbootCms API接口实现Ajax无刷新分页实现点击加载更多功能

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

pbootcms pboot:nav 判断没有子类得时候显示同级栏目

PbootCMS后台增加自定义字段搜索解决办法

pbootcms 上传的图片自动转换webp格式附源码教程

pbootcms后台自定义字段多图上传不能多图拖动解决办法

小程序分包加载开发：突破 2M 限制 + 首屏加载提速 50% 方案

响应式网站开发避坑：viewport 设置 + 媒体查询 + 适配测试方法

网站安全开发指南：XSS/CSRF 防护 + SQL 注入拦截实战

用PbootCms扩展定制一个简单天气预报小插件

pbootcms网站修改CSS样式后自动更新缓存和自动增加版本号