594 lines
24 KiB
HTML
594 lines
24 KiB
HTML
{extend name="public/base" /}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/index.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/swiper.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/nav.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/advantage.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/mask.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_list.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/product_card.css">
|
||
<link rel="stylesheet" href="__CSS__/topic_power_prodline/footer.css">
|
||
{/block}
|
||
{block name="header"}
|
||
<!-- 重置header头为空 -->
|
||
{/block}
|
||
{block name="main"}
|
||
<a class="header" href="/">
|
||
<div class="header-img">
|
||
<img src="__IMAGES__/logo.png" alt="">
|
||
</div>
|
||
</a>
|
||
<!-- 轮播核心容器 -->
|
||
<div class="swiper-container auto-swiper-container" >
|
||
{notempty name="data.focus_image"}
|
||
<div class="swiper-wrapper">
|
||
{volist name="data.focus_image" id="fo"}
|
||
<a class="swiper-slide auto-swiper-slide" href="{$fo.link}">
|
||
<img src="{$fo.image}" alt="{$fo.title}" />
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
<div class="swiper-pagination"></div>
|
||
{/notempty}
|
||
</div>
|
||
<!-- 分类 -->
|
||
{notempty name="data.category"}
|
||
<div class="nav-box">
|
||
{volist name="data.category" id="ca"}
|
||
<a class="nav-item" href="{$ca.link}">
|
||
<img src="{$ca.image}" alt="{$ca.title}">
|
||
<p {:style(['color'=>$ca.title_txt_color])}>{$ca.title}</p>
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
{/notempty}
|
||
<!-- 500万 -->
|
||
{notempty name="data.why_choose"}
|
||
<div class="advantage-section">
|
||
{assign name="why_choose_title" value=":array_shift($data.why_choose)" /}
|
||
<h2 class="advantage-section__title">{$why_choose_title.title|default=''}</h2>
|
||
<div class="advantage-section__list">
|
||
{volist name="data.why_choose" id="ch"}
|
||
|
||
<div class="advantage-card-wrap">
|
||
<div class="advantage-card" data-target="design">
|
||
<img src="{$ch.image}" alt="{$ch.title}:{$ch.short_title}" class="advantage-card__img">
|
||
<div class="advantage-card__content">
|
||
<!-- 标题+箭头容器：水平+垂直双居中，内部文字左、箭头右 -->
|
||
<div class="advantage-card__heading-wrap">
|
||
<div class="advantage-card__heading" {:style(['color'=>$ch.title_txt_color])}>{$ch.title}</div>
|
||
<img src="__IMAGES__/jiant.png" alt="" class="card-arrow">
|
||
</div>
|
||
<div class="advantage-card__description" {:style(['color'=>$ch.short_title_txt_color])}>{$ch.short_title}</div>
|
||
<div style="display:none;" class="mack-conten-text">{$ch.desc|raw}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 产品差旅充 -->
|
||
{notempty name="data.travel_charger"}
|
||
<div class="product-box">
|
||
{assign name="tc_title" value=":array_shift($data.travel_charger)" /}
|
||
<div class="product-title">
|
||
<h2 class="product-title-h2">{$tc_title.title|default=''}</h2>
|
||
<p class="product-title-p">{$tc_title.short_title|default=''}</p>
|
||
</div>
|
||
<div class="product-container" >
|
||
{assign name="tc_first_section_lf" value=":array_shift($data.travel_charger)" /}
|
||
{notempty name="tc_first_section_lf"}
|
||
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||
<img src="{$tc_first_section_lf.image}" alt="{$tc_first_section_lf.title}" class="product-img">
|
||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||
<div class="product-img-hover product-img-1">
|
||
<img src="{$tc_first_section_lf.extra_image}" alt="{$tc_first_section_lf.short_title}">
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{assign name="tc_first_section_lr" value=":array_shift($data.travel_charger)" /}
|
||
{notempty name="tc_first_section_lr"}
|
||
<div class="product-right">
|
||
<img src="{$tc_first_section_lr.image}" alt="{$tc_first_section_lr.title}" class="right-content right-img">
|
||
<video src="{$tc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
{assign name="tc_second_section" value=":array_splice($data.travel_charger, 0, 4)" /}
|
||
{notempty name="tc_second_section"}
|
||
<div class="product-card-box">
|
||
<div class="product-card-container">
|
||
{volist name="tc_second_section" id="tss"}
|
||
<a class="product-card-wrap" href="{$tss.link}">
|
||
<div class="product-card" >
|
||
<div class="product-card-img">
|
||
<img src="{$tss.image}" alt="{$tss.title}">
|
||
</div>
|
||
<div class="product-card-text">
|
||
<div class="product-card-title" {:style(['color'=>$tss.title_txt_color])}>{$tss.title}</div>
|
||
<div class="product-card-desc" {:style(['color'=>$tss.short_title_txt_color])}>{$tss.short_title}</div>
|
||
</div>
|
||
<div class="product-card-link">
|
||
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||
</div>
|
||
</div>
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{assign name="tc_three_section" value=":array_shift($data.travel_charger)" /}
|
||
{notempty name="tc_three_section"}
|
||
<a href="{$tc_three_section.link}" class="more">
|
||
<div class="more-img">
|
||
查看更多
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{/notempty}
|
||
</div>
|
||
{/notempty}
|
||
<!-- 产品 家居充-->
|
||
{notempty name="data.home_charger"}
|
||
<div class="product-box">
|
||
{assign name="hc_title" value=":array_shift($data.home_charger)" /}
|
||
<div class="product-title">
|
||
<h2 class="product-title-h2">{$hc_title.title|default=''}</h2>
|
||
<p class="product-title-p">{$hc_title.short_title|default=''}</p>
|
||
</div>
|
||
<div class="product-container">
|
||
{assign name="hc_first_section_lf" value=":array_shift($data.home_charger)" /}
|
||
{notempty name="hc_first_section_lf"}
|
||
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||
<img src="{$hc_first_section_lf.image}" alt="{$hc_first_section_lf.title}" class="product-img">
|
||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||
<div class="product-img-hover product-img-1">
|
||
<img src="{$hc_first_section_lf.extra_image}" alt="{$hc_first_section_lf.short_title}">
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{assign name="hc_first_section_lr" value=":array_shift($data.home_charger)" /}
|
||
{notempty name="hc_first_section_lr"}
|
||
<div class="product-right">
|
||
<img src="{$hc_first_section_lr.image}" alt="{$hc_first_section_lr.title}" class="right-content right-img">
|
||
<video src="{$hc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
{assign name="hc_second_section" value=":array_splice($data.home_charger, 0, 4)" /}
|
||
{notempty name="hc_second_section"}
|
||
<div class="product-card-box">
|
||
<div class="product-card-container">
|
||
{volist name="hc_second_section" id="hcs"}
|
||
<a class="product-card-wrap" href="{$tss.link}">
|
||
<div class="product-card" href="#">
|
||
<div class="product-card-img">
|
||
<img src="{$hcs.image}" alt="{$hcs.short_title}">
|
||
</div>
|
||
<div class="product-card-text">
|
||
<div class="product-card-title">{$hcs.title}</div>
|
||
<div class="product-card-desc">{$hcs.short_title}</div>
|
||
</div>
|
||
<div class="product-card-link">
|
||
<img src="__IMAGES__/ljgd.png" alt="查看更多">
|
||
</div>
|
||
</div>
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
{assign name="hc_three_section" value=":array_shift($data.home_charger)" /}
|
||
{notempty name="hc_three_section"}
|
||
<a href="{$hc_three_section.link}" class="more">
|
||
<div class="more-img">
|
||
查看更多
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
</div>
|
||
{/notempty}
|
||
<!-- 产品 桌面充（悬浮图上右超出）底部列表样式不一样(左文右图) -->
|
||
<div class="product-box">
|
||
{assign name="dc_title" value=":array_shift($data.desktop_charger)" /}
|
||
<div class="product-title">
|
||
<h2 class="product-title-h2">{$dc_title.title|default=''}</h2>
|
||
<p class="product-title-p">{$dc_title.short_title|default=''}</p>
|
||
</div>
|
||
<div class="product-container">
|
||
{assign name="dc_first_section_lf" value=":array_shift($data.desktop_charger)" /}
|
||
{notempty name="dc_first_section_lf"}
|
||
<a class="product-left" href="{$tc_first_section_lf.link}">
|
||
<img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
|
||
<!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
|
||
<div class="product-img-hover product-img-2" >
|
||
<img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{assign name="dc_first_section_lr" value=":array_shift($data.desktop_charger)" /}
|
||
{notempty name="dc_first_section_lr"}
|
||
<div class="product-right">
|
||
<img src="{$dc_first_section_lr.image}"
|
||
alt="使用场景" class="right-content right-img">
|
||
<!--muted loop playsinline controls-->
|
||
<video
|
||
src="{$dc_first_section_lr.video}"
|
||
class="right-content right-video" style="display: none;">
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
{assign name="dc_second_section" value=":array_splice($data.desktop_charger, 0, 2)" /}
|
||
{notempty name="dc_second_section"}
|
||
<div class="product-card-box">
|
||
<div class="product-card-container2">
|
||
{volist name="dc_second_section" id="dcs"}
|
||
<a class="product-card2" href="{$dcs.link}">
|
||
<div class="product-text2">
|
||
<!-- 新增内部容器，确保所有内容左对齐一致性 -->
|
||
<div class="product-text-content2">
|
||
<div class="product-card-title2">{$dcs.title}</div> <!-- 测试超出一行省略 -->
|
||
<div class="product-card-desc2">{$dcs.short_title}</div> <!-- 测试超出2行省略 -->
|
||
<div class="product-card-link2">
|
||
<img src="__IMAGES__/ljgd.png" alt="了解更多">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="product-card-img2">
|
||
<img src="{$dcs.image}" alt="{$dcs.title}">
|
||
</div>
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
{assign name="dc_three_section" value=":array_shift($data.desktop_charger)" /}
|
||
{notempty name="dc_three_section"}
|
||
<a href="{$dc_three_section.link}" class="more">
|
||
<div class="more-img">
|
||
查看更多
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
</div>
|
||
<!-- 墙插 -->
|
||
{notempty name="data.wall_charger"}
|
||
<div class="product-box">
|
||
{assign name="wc_title" value=":array_shift($data.wall_charger)" /}
|
||
<div class="product-title">
|
||
<h2 class="product-title-h2">{$wc_title.title|default=''}</h2>
|
||
<p class="product-title-p">{$wc_title.short_title|default=''}</p>
|
||
</div>
|
||
<div class="product-container">
|
||
{assign name="wc_first_section_lf" value=":array_shift($data.wall_charger)" /}
|
||
{notempty name="wc_first_section_lf"}
|
||
<a class="product-left" href="{$wc_first_section_lf.link}">
|
||
<img src="{$wc_first_section_lf.image}" alt="{$wc_first_section_lf.title}" class="product-img">
|
||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||
<div class="product-img-hover product-img-1">
|
||
<img src="{$wc_first_section_lf.extra_image}" alt="{$wc_first_section_lf.title}">
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{assign name="wc_first_section_lr" value=":array_shift($data.wall_charger)" /}
|
||
{notempty name="wc_first_section_lr"}
|
||
<div class="product-right">
|
||
<img src="{$wc_first_section_lr.image}" alt="{$wc_first_section_lr.title}" class="right-content right-img">
|
||
<video src="{$wc_first_section_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
{assign name="wc_more_section" value=":array_shift($data.wall_charger)" /}
|
||
{notempty name="wc_more_section"}
|
||
<a href="{$wc_more_section.link}" class="more">
|
||
<div class="more-img">
|
||
查看更多
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
</div>
|
||
{/notempty}
|
||
{notempty name="data.converter"}
|
||
<!-- 转换器 -->
|
||
<div class="product-box">
|
||
{assign name="ct_title" value=":array_shift($data.converter)" /}
|
||
<div class="product-title">
|
||
<h2 class="product-title-h2">{$ct_title.title|default=''}</h2>
|
||
<p class="product-title-p">{$ct_title.short_title|default=''}</p>
|
||
</div>
|
||
{assign name="ct_more_section" value=":array_pop($data.converter)" /}
|
||
{assign name="ct_chunk_section" value=":array_chunk($data.converter, 2)" /}
|
||
{assign name="ct_chunk_section_len" value=":count($ct_chunk_section)" /}
|
||
{volist name="ct_chunk_section" id="cts" key="k"}
|
||
<div class="product-container">
|
||
{assign name="cts_lf" value=":array_shift($cts)" /}
|
||
{notempty name="cts_lf"}
|
||
<a class="product-left" href="{$cts_lf.link}">
|
||
<img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
|
||
<!-- 公共类+定位类：尺寸统一，定位不同 -->
|
||
<!--style="display:flex;justify-content: center;"-->
|
||
<div class="product-img-hover product-img-1" >
|
||
<!-- style="width:70%"-->
|
||
<img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
{assign name="cts_lr" value=":array_shift($cts)" /}
|
||
{notempty name="cts_lr"}
|
||
<div class="product-right">
|
||
<img src="{$cts_lr.image}" alt="{$cts_lr.title}" class="right-content right-img">
|
||
<video src="{$cts_lr.video}" class="right-content right-video" muted loop playsinline controls>
|
||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||
</video>
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
{neq name="k" value="$ct_chunk_section_len"}
|
||
<div class="line"></div>
|
||
{/neq}
|
||
{/volist}
|
||
{notempty name="ct_more_section"}
|
||
<a href="{$ct_more_section.link}" class="more">
|
||
<div class="more-img">
|
||
查看更多
|
||
</div>
|
||
</a>
|
||
{/notempty}
|
||
</div>
|
||
{/notempty}
|
||
{notempty name="data.footer_info"}
|
||
<!-- 底部 -->
|
||
<div class="footer">
|
||
<div class="footer-img">
|
||
<img src="{$data.footer_info.0.image}" alt="">
|
||
</div>
|
||
</div>
|
||
{/notempty}
|
||
<!-- 蒙版 -->
|
||
<div class="mask" id="mask">
|
||
<div class="mask-content" >
|
||
<span class="close-btn">×</span>
|
||
<div class="mask-scroll-content"></div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script type="text/javascript">
|
||
|
||
let swiper=null;
|
||
const advantageItems = document.querySelectorAll('.advantage-card');
|
||
let scrollTop = 0; // 保存页面滚动位置
|
||
let closeBtnHtml = null; // 关闭按钮元素（全局变量，避免重复创建）
|
||
const mask = document.getElementById('mask');
|
||
const maskContent = document.querySelector('.mask-content');
|
||
const maskScrollContent = document.querySelector('.mask-scroll-content'); // 滚动容器（关键！）
|
||
const closeBtn = document.querySelector('.close-btn')
|
||
// 初始化：确保 maskScrollContent 存在于 maskContent 中（避免被清空）
|
||
if (!maskScrollContent) {
|
||
// 如果页面没有 mask-scroll-content，动态创建（确保结构稳定）
|
||
const scrollContent = document.createElement('div');
|
||
scrollContent.className = 'mask-scroll-content';
|
||
maskContent.appendChild(scrollContent);
|
||
}
|
||
|
||
|
||
function createCloseBtn() {
|
||
if (closeBtnHtml) {
|
||
closeBtnHtml.remove();
|
||
}
|
||
|
||
closeBtnHtml = document.createElement('span');
|
||
closeBtnHtml.className = 'close-btn';
|
||
closeBtnHtml.innerHTML = '×';
|
||
|
||
closeBtnHtml.addEventListener('click', hideMask);
|
||
|
||
// 挂载到 maskContent（而非 scrollContent），避免被滚动影响位置
|
||
maskContent.prepend(closeBtnHtml);
|
||
}
|
||
|
||
function showMask(contentHtml) {
|
||
// 保存页面滚动位置
|
||
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
|
||
// 关键：将内容填充到 scrollContent 中（而非直接替换 maskContent）
|
||
maskScrollContent.innerHTML = contentHtml;
|
||
createCloseBtn();
|
||
|
||
// 显示蒙版
|
||
mask.style.display = 'flex';
|
||
|
||
// 禁止滚动（复用你的逻辑）
|
||
document.documentElement.classList.add('no-scroll');
|
||
document.body.classList.add('no-scroll');
|
||
document.body.style.top = `-${scrollTop}px`;
|
||
|
||
// 额外：打开蒙版时就重置滚动位置（避免残留上次滚动状态）
|
||
maskScrollContent.scrollTop = 0;
|
||
}
|
||
|
||
function hideMask() {
|
||
// 关键步骤 1：先重置 scrollContent 的滚动位置（此时元素还未被销毁）
|
||
maskScrollContent.scrollTop = 0;
|
||
|
||
// 关键步骤 2：清空 scrollContent 的内容（而非 maskContent）
|
||
maskScrollContent.innerHTML = "";
|
||
|
||
// 隐藏蒙版
|
||
mask.style.display = 'none';
|
||
|
||
// 恢复滚动（复用你的逻辑）
|
||
document.documentElement.classList.remove('no-scroll');
|
||
document.body.classList.remove('no-scroll');
|
||
document.body.style.top = '';
|
||
|
||
// 还原页面滚动位置
|
||
window.scrollTo(0, scrollTop);
|
||
|
||
// 移除关闭按钮（可选，避免残留）
|
||
if (closeBtnHtml) {
|
||
closeBtnHtml.remove();
|
||
closeBtnHtml = null;
|
||
}
|
||
}
|
||
// 点击卡片显示详情
|
||
advantageItems.forEach((item) => {
|
||
item.addEventListener('click', (e) => {
|
||
// 获取当前点击卡片内的.mack-conten-text元素
|
||
const currentMackContent = e.currentTarget.querySelector('.mack-conten-text');
|
||
if (currentMackContent) {
|
||
// 关键修改：获取该元素的子内容（innerHTML 本身就是内部HTML，不含当前元素标签）
|
||
// 若想更彻底，可遍历子节点拼接内容（兼容特殊场景）
|
||
let contentHtml = '';
|
||
Array.from(currentMackContent.childNodes).forEach(child => {
|
||
// 只保留元素节点和文本节点（过滤空节点）
|
||
if (child.nodeType === 1 || child.nodeType === 3) {
|
||
contentHtml += child.outerHTML || child.textContent;
|
||
}
|
||
});
|
||
// 显示蒙版并传入纯净的子内容
|
||
showMask(contentHtml);
|
||
}
|
||
});
|
||
});
|
||
// 关闭按钮事件
|
||
closeBtn.addEventListener('click', hideMask);
|
||
// 点击蒙版背景关闭（可选）
|
||
mask.addEventListener('click', (e) => {
|
||
if (e.target === mask) hideMask();
|
||
});
|
||
|
||
// ESC 键关闭（可选）
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && mask.style.display === 'flex') hideMask();
|
||
});
|
||
|
||
// 关键：拦截蒙版的 touchmove 事件，阻止滚动穿透（移动端核心）
|
||
mask.addEventListener(
|
||
'touchmove',
|
||
(e) => {
|
||
// 只有点击蒙版背景（不是内容区域）才阻止滚动
|
||
if (e.target === mask) {
|
||
e.preventDefault(); // 阻止默认触摸滚动行为
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
}
|
||
},
|
||
{ passive: false }
|
||
); // passive: false 必须，否则 preventDefault 无效
|
||
|
||
const allVideos = document.querySelectorAll('.right-video');
|
||
let scrollTimer = null; // 防抖定时器
|
||
// 停止所有视频播放
|
||
function stopAllVideos() {
|
||
allVideos.forEach((video) => {
|
||
video.pause();
|
||
video.style.display = 'none';
|
||
// 显示对应图片
|
||
const img = video.parentElement.querySelector('.right-img');
|
||
if (img) img.style.display = 'block';
|
||
});
|
||
}
|
||
// 处理视频/图片切换的核心逻辑（抽离为独立函数）
|
||
// 处理视频/图片切换的核心逻辑（抽离为独立函数）
|
||
function handleVideoActive() {
|
||
const productRights = document.querySelectorAll('.product-right');
|
||
let activeVideo = null;
|
||
// 找出当前在视口中的视频容器
|
||
productRights.forEach((rightContainer) => {
|
||
const img = rightContainer.querySelector('.right-img');
|
||
const video = rightContainer.querySelector('.right-video');
|
||
const videoSrc = video.src.trim();
|
||
if (!img || !video || !videoSrc) return;
|
||
|
||
const rect = rightContainer.getBoundingClientRect();
|
||
// 视口判断：容器进入视口50%以上视为活跃
|
||
const isInView =
|
||
rect.top < window.innerHeight * 0.7 &&
|
||
rect.bottom > window.innerHeight * 0.3;
|
||
|
||
if (isInView) {
|
||
activeVideo = video;
|
||
}
|
||
});
|
||
|
||
// 处理活跃视频
|
||
if (activeVideo) {
|
||
stopAllVideos(); // 先停止其他视频
|
||
const img = activeVideo.parentElement.querySelector('.right-img');
|
||
img.style.display = 'none';
|
||
activeVideo.style.display = 'block';
|
||
|
||
// 自动播放（兼容原生控制栏，用户手动暂停后不会强制播放）
|
||
if (activeVideo.paused) {
|
||
activeVideo.play().catch((err) => {
|
||
console.log('视频播放失败（浏览器限制）：', err);
|
||
// 播放失败时回退到图片
|
||
activeVideo.style.display = 'none';
|
||
img.style.display = 'block';
|
||
});
|
||
}
|
||
} else {
|
||
stopAllVideos(); // 无活跃视频时停止所有播放
|
||
}
|
||
}
|
||
// 滚动事件：添加防抖（移动端推荐100-200ms延迟）
|
||
window.addEventListener('scroll', function () {
|
||
// 清除上一次的定时器
|
||
clearTimeout(scrollTimer);
|
||
// 滚动停止后150ms再执行核心逻辑
|
||
scrollTimer = setTimeout(handleVideoActive, 150);
|
||
});
|
||
|
||
|
||
window.onload = function () {
|
||
if (typeof Swiper === 'undefined') {
|
||
console.error('Swiper加载失败，请刷新页面重试');
|
||
return;
|
||
}
|
||
|
||
swiper = new Swiper('.auto-swiper-container', {
|
||
autoplay: {
|
||
delay: 3000, // 3秒切换
|
||
disableOnInteraction: false,
|
||
},
|
||
loop: false,
|
||
slidesPerView: 1,
|
||
spaceBetween: 0,
|
||
// 启用分页指示标（核心配置）
|
||
pagination: {
|
||
el: '.swiper-pagination', // 对应 HTML 中的指示标容器
|
||
clickable: true, // 允许点击指示标切换
|
||
// dynamicBullets: true, // 动态指示标（当前激活放大）
|
||
//dynamicMainBullets: 3, // 动态模式显示3个核心指示标
|
||
},
|
||
navigation: false,
|
||
scrollbar: false,
|
||
on: {
|
||
resize: function () {
|
||
this.update();
|
||
},
|
||
},
|
||
});
|
||
|
||
window.addEventListener('resize', function () {
|
||
swiper.update();
|
||
});
|
||
|
||
// 初始化时触发滚动事件，确保状态正确
|
||
window.dispatchEvent(new Event('scroll'));
|
||
};
|
||
|
||
|
||
|
||
</script>
|
||
{/block}
|