2014已经悄然到来，在新的一年我们恭贺所有客户事业蒸蒸日上，同事庆祝智软设计工作室成立5周年，在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务！期待与你合作
智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格，最优质的质量，最突出的设计！得到了客户的一致认可,我们的服务包括：宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!
点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解
2014开幕，宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格
智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新，让新老客户更好的看到我们做的案例，点击查看我们做的网站案例吧！
智软(宁波网络公司)帮你轻松解决网络问题，网站一站式解决方案
Swiper轮播图视频加图片混合，完美解决方法，
2024-08-19 15:36:36
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 判断电脑版和手机版 ，直接程序判断增加自定义标签函数最新文章
2021-05-10 09:29
- pbootcms 上传的图片自动转换webp，达到最佳网站加载速度
- pbootcms模板里面写php判断的方法-判断session
- dede 电脑端和手机端首页同步生成方法，
- excel表格导入access中不换行解决办法-
- dede完美上下篇 英文版替换标签 dede:prenext 中英
- dede中英文网站栏目条调用方法
- dede双语站 面包导航{dede:field name='position'}
- PS： 无法完成请求，因为某种原因阻止文本引擎进行
- dede企业网站常见左侧固定大小类二级菜单调用代码
- 栏目页dede:channelartlist调用下级子类并dede:arcl
- dede:channelartlis 判断是否有子类栏目
- 更换织梦后台图集上传flash插件为layui上传模块
相关文章
2021-05-10 09:29
客户案例
QQ在线咨询
18668277799
