發(fā)布日期: 2024-08-19 | 來源: 智軟設(shè)計工作室
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">
您的瀏覽器不支持視頻標(biāo)簽。
</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 >圖片標(biāo)題</h2>
<p >圖片描述文字提供有關(guān)圖片的附加信息。</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 >圖片標(biāo)題</h2>
<p >圖片描述文字提供有關(guān)圖片的附加信息。</p>
<a href="#">更多詳情</a>
</div>
</div>
</div>
<!-- 分頁器 -->
<div class="swiper-pagination"></div>
<!-- 導(dǎo)航按鈕 -->
<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, // 啟用循環(huán)模式
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(); // 播放當(dāng)前幻燈片中的視頻
swiper.autoplay.stop(); // 暫時停止自動輪播
video.onended = function() {
// 視頻播放完畢后切換到下一張幻燈片
swiper.slideNext();
swiper.autoplay.start(); // 重新啟動自動輪播
};
} else {
swiper.autoplay.start(); // 如果當(dāng)前幻燈片不是視頻，則恢復(fù)自動輪播
// 處理文字動畫,增加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(); // 如果當(dāng)前幻燈片不是視頻，則恢復(fù)自動輪播
// 處理文字動畫,增加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-06-19
<?php// 設(shè)定你要清除BOM的根目錄（會自動掃描所有子目錄和文件）$HOME = dirname(__FILE__);// 如果是Windows系統(tǒng)，修改為：$WIN = 1;$WIN = 0;?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
閱讀更多2023-05-29
解決辦法：程序運行異常: Modulo by zero，位置: /data/home/qxu1539590078/htdocs/core/function/helperphp，第838行pbootcms 判斷字段內(nèi)容是否為空，會出現(xiàn)以上問題，導(dǎo)致的原有就是內(nèi)容里又特殊字符，那我們怎么解決了?？捎糜萌缦路椒?，截取部分來做判斷：{pboot:if('{content:ext_gzcanr2 len=8}'!=''
閱讀更多2021-11-24
網(wǎng)站安全 pbootcms修改apps目錄 更安全 ，建議不經(jīng)常更新的用戶。修改。如果要升級在改回來。打開 /core/init.php// 定義應(yīng)用存放物理路徑define('APP_PATH', ROOT_PATH . '/apps');修改成復(fù)雜點的。改完后apps目錄也要相應(yīng)改下。
閱讀更多2025-12-26
最近客戶網(wǎng)站，偶發(fā)出現(xiàn)502錯誤。服務(wù)器配置很多也沒用完。其他進程配置也放很高。配置玩了。還是偶發(fā)會有。后來看到一個大神說的。瀏覽器和nginx的鏈接默認(rèn)時60秒，然后nginx和應(yīng)用之間比如php或者JAVA默認(rèn)值沒有60秒。一般是20秒或者30秒，所以就導(dǎo)致這個問題了。值需要在nginx里設(shè)置這個超時時間。小于60秒就行了。
閱讀更多2024-07-18
根據(jù)你提供的代碼，看起來你正在使用Ajax來發(fā)送訂單信息到一個PHP頁面，并期望通過PHP頁面發(fā)送電子郵件。如果第一次發(fā)送成功，但第二次發(fā)送失敗，可能有幾個原因需要檢查和排除：重復(fù)發(fā)送問題: 確保每次發(fā)送請求時，checkoutString 的內(nèi)容是正確的，并且你沒有意外地覆蓋了其他數(shù)據(jù)。服務(wù)器響應(yīng)問題: 確保PHP頁面 http://ww
閱讀更多2025-08-02
網(wǎng)站調(diào)用Noto Sans SC字體。讓字體變好看。告別默認(rèn)字體太細(xì)，調(diào)用這個。基本上和設(shè)計稿上面的字體差不多的。 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">body,a { font-family: "Noto
閱讀更多2023-07-10
pbootcms后臺管理二次開發(fā)中如何使用{foreach}{if}{/if}{/foreach}語句，判斷寫入模板得數(shù)據(jù)，后臺模板頁面使用1.首先在相應(yīng)的控制器里面獲取數(shù)據(jù)assign到前端頁面中例如$this->assign('NameData',$NameModel->getList());注意如果不是當(dāng)前控制器對應(yīng)的model，需要new一個新的model去查詢數(shù)據(jù)。2.在htm
閱讀更多2024-08-20
swiper里面如果又視頻和圖片，由于視頻客戶比例和圖片不對。會導(dǎo)致高度不一樣。會導(dǎo)致swiper高度撐高，其他比例少的就會又空白，由于考慮圖片自適應(yīng)。沒有采用背景，背景的話。有些是顯示不完全，只能像辦法css裁剪掉視頻，里面視頻樣式用這個即可。 .swiper-containervd .swiper-slide video {
閱讀更多2023-07-17
最近客戶網(wǎng)站制作完畢。交給客戶。突然出現(xiàn)一個產(chǎn)品提示這個，如何打開這個文件看了下?？催@個838行是在判斷%，不知道做什么用途，為什么要判斷這個，但是讓客戶不去填寫這個%也是不行，所有下面分享下解決辦法，錯誤提示：提示程序運行異常提示: Modulo by zero，位置：/core/function/helper.php，第838行。解決辦法：/co
閱讀更多