发布日期: 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>2022-12-06
PBOOTCMS重置栏目ID和文章id从1开始自增，SQLITE数据库重置id从1开始DELETE FROM SQLITE_SEQUENCE WHERE NAME = 'ay_content'sqlite_sequence表也是SQLite的系统表改后面的表名称就行了。
阅读更多2023-07-06
今天准备做网站写程序，发现键盘打字对不上，也就是字母键盘错乱，打d出来f，网站找了下。都说用fn+Num Lock键，但是小米键盘没有Num Lock键盘。那怎么办了。看网上说是驱动问题，要更新驱动，我也试了一下。发现还是不行。提示已经最新了。然后我干脆把所有的键盘设备驱动，全部删除了。重启一下电脑就好了。记得是删除这些
阅读更多2022-12-10
// flex空白元素填充 function flex_empty(listbox, ele, num, emptyclass) { var len = listbox.find(ele).length; var need = Math.ceil(len / num) * num - len; &nb
阅读更多2022-05-19
PbootCMS栏目页 详情页获取顶级栏目大图，这样不用每个子类都设置栏目大图banner{pboot:sort scode={sort:tcode}}<div class="nybanner"><img src="[sort:pic]" alt="[sort:name]"/></div>{/pboot:sort}
阅读更多2021-12-14
最新7.0video.js响应式设置，配置和设置语言为繁体，先导入相应js和css <link href="/videojs/video-js.min.css" rel="stylesheet"> <script src="/videojs/video.min.js"></script> <script src="/videojs/lang/zh-TW.js"&g
阅读更多2022-01-06
网页速度影响因素首先说明这里讲的网页速度是排除掉静态资源加载的，这里的速度是用户访问域名然后程序响应回来所花的时间，主要影响因素有以下几点：1、服务器配置配置高的服务器响应速度差别还是很明显的，但是一般情况下咱们的数据量不是超大，例如几万，那么区别不明显。2、CMS程序这个可能是影响这个速度最明显的地方，
阅读更多2023-08-30
HTML5 引入了 <picture> 元素屏幕匹配的不同尺寸显示不同图片 <picture ><source srcset="m.jpg" media="(max-width: 650px)"> <img class="img-responsive" srcset="pc.jpg" alt=""></picture>
阅读更多2022-04-25
{pboot:sort scode={sort:tcode}}{pboot:if('{sort:pic}'!='')}{sort:pic}{else}{label:no_banner}{/pboot:if}{/pboot:sort}
阅读更多2022-07-15
tags关联文章{content:tags}{pboot:if('{content:tags}'=='')} 空{else}手册：{pboot:list scode=40 tags={content:tags}}<p><a href="[list:link]">[list:title]</a></p>{/pboot:list}常见问题：{pboot:list scode=41 tags={content:tags}}<
阅读更多