fix:首页切换图片bug
This commit is contained in:
@@ -1,382 +1,380 @@
|
||||
{extend name="public/base" /}
|
||||
{block name="style"}
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/before-after.min.css" />
|
||||
|
||||
{/block}
|
||||
{block name="main"}
|
||||
<div class="orico_Page_index">
|
||||
<div class="pageMain">
|
||||
<!-- banner -->
|
||||
{notempty name="focus_images"}
|
||||
<div class="swiper-container bannerswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="focus_images" id="focus"}
|
||||
<div class="swiper-slide">
|
||||
<a href="{$focus.link}" target="_blank"><img src="{$focus.image}" alt="{$focus.title}"></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<!-- 如果需要分页器 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- 如果需要导航按钮 -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 产品分类信息 -->
|
||||
{notempty name="product_categorys"}
|
||||
<div class="catMain">
|
||||
{volist name="product_categorys" id="cate"}
|
||||
<a class="catit" href="{$cate.link}">
|
||||
<img src="{$cate.image}" src="catIcoImg" />
|
||||
<span class="catName" {notempty name="cate.title_txt_color"}style="color:{$cate.title_txt_color};"{/notempty}>{$cate.title}</span>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 特色专题及公司实力 -->
|
||||
{notempty name="featured_topics"}
|
||||
<div class="featuredtopicsMain">
|
||||
<div class="ftcontent">
|
||||
{volist name="featured_topics" id="topic" mod="2"}
|
||||
<a class="ftItme" href="{$topic.link}">
|
||||
{if condition="$mod == '1'"}
|
||||
<div class="ftItme_right">
|
||||
<img src="{$topic.image}" />
|
||||
</div>
|
||||
<div class="ftItme_left">
|
||||
<p>{$topic.title}</p>
|
||||
<div class="subtitle">
|
||||
<span>{:lang('index.view_all')} ></span>
|
||||
<div class="tpicture"></div>
|
||||
</div>
|
||||
</div>
|
||||
{else/}
|
||||
<div class="ftItme_left">
|
||||
<p>{$topic.title}</p>
|
||||
<div class="subtitle">
|
||||
<span>{:lang('index.view_all')}</span>
|
||||
<div class="tpicture"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftItme_right">
|
||||
<img src="{$topic.image}" />
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 明星产品/热点产品 -->
|
||||
{notempty name="featured_products"}
|
||||
<div class="featuredProducts">
|
||||
<p class="biaoti">{:lang('index.featured_products')}</p>
|
||||
<div class="swiper fpSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="featured_products" id="product"}
|
||||
<div class="swiper-slide picture">
|
||||
<a class="primg">
|
||||
<img src="{$product.cover_image}" />
|
||||
</a>
|
||||
<div class="fpptitle">{$product.name}</div>
|
||||
<div class="subtitle">{$product.short_name}</div>
|
||||
<a class="more">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd">
|
||||
<div class="swiper-container1">
|
||||
<div class="slideshow-pag swiper-pagination"></div>
|
||||
</div>
|
||||
<div class="swiper-container swi1">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 视频宣传 -->
|
||||
{notempty name="video"}
|
||||
<div class="hotProduct">
|
||||
<div class="hotvideo">
|
||||
<iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen id="videoElement"></iframe>
|
||||
</div>
|
||||
<img src="{$video.image}" class="hotImg" />
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 场景介绍 -->
|
||||
{notempty name="scenes"}
|
||||
<div class="sceneIntroduction">
|
||||
{volist name="scenes" id="scene"}
|
||||
<div class="sceneitem">
|
||||
<div class="sceneInfo">
|
||||
<p class="scenetitle" {notempty name="scene.title_txt_color"}style="color:{$scene.title_txt_color};"{/notempty}>{$scene.title}</p>
|
||||
<p class="subtitle" {notempty name="scene.desc_txt_color"}style="color:{$scene.desc_txt_color};"{/notempty}>{$scene.desc|raw}</p>
|
||||
<a class="sceneMore" href="{$scene.link}">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- orico科技 -->
|
||||
<div class="oricoTechnology">
|
||||
<p class="ottitle">{:lang('index.orico_technology')}</p>
|
||||
<span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
|
||||
<div class="beforeafter">
|
||||
<div id="after"></div>
|
||||
<div id="before"></div>
|
||||
<div class="drag-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 品牌故事 -->
|
||||
{notempty name="brand_story"}
|
||||
<div class="brandStory">
|
||||
<div class="swiper brandStoryswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="brand_story" id="story"}
|
||||
<div class="swiper-slide bsitem">
|
||||
<div class="itmImg">
|
||||
<img src="{$story.image}" class="bsImg" />
|
||||
</div>
|
||||
<div class="bsinf">
|
||||
<div class="bstitle" {notempty name="story.title_txt_color"}style="color:{$story.title_txt_color};"{/notempty}>{$story.title}</div>
|
||||
<div class="bssubtitle" {notempty name="story.desc_txt_color"}style="color:{$story.desc_txt_color};"{/notempty}>{$story.desc|raw}</div>
|
||||
<a class="bsmore" href="{$story.link}">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd bs_swiperasd" id="timeline">
|
||||
<div class="bs_swcontainer">
|
||||
<div class="swiper-pagination bs_pagination"></div>
|
||||
<hr>
|
||||
<!-- <span class="time1">2021</span> -->
|
||||
<!-- <span class="time2">2022</span> -->
|
||||
<!-- <span class="time3">2023</span> -->
|
||||
</div>
|
||||
<div class="swiper-container bs_bts">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
|
||||
<img class="slideshow-btn swiper-button-prev " src="static/index/temp_images/lefta.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 数据统计-->
|
||||
{notempty name="data_statistics"}
|
||||
<div class="oricoDataStatistics">
|
||||
<div class="odsmain">
|
||||
{volist name="data_statistics" id="ods"}
|
||||
<div class="odsItem">
|
||||
<h1 {notempty name="ods.desc_txt_color"}style="color:{$ods.desc_txt_color};"{/notempty}>{$ods.desc|raw}</h1>
|
||||
<h3 {notempty name="ods.title_txt_color"}style="color:{$ods.title_txt_color};"{/notempty}>{$ods.title}</h3>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 文章轮播 -->
|
||||
{notempty name="recommend_articles"}
|
||||
<div class="oricoPub">
|
||||
<div class="swiper pubswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="recommend_articles" id="article"}
|
||||
<div class="swiper-slide pubSwitem">
|
||||
<a class="pubimgdiv" href="{:url('article/index', ['id' => $article.id])}">
|
||||
<img src="{$article.image}" class="pubimg" />
|
||||
</a>
|
||||
<a class="pubinfo">
|
||||
<span>{$article.title}</span>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd pubswiperasd">
|
||||
<div class="swiper-container">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- FAQ-->
|
||||
{notempty name="recommend_faq"}
|
||||
<div class="oricoFQA">
|
||||
<div class="fqaleft">
|
||||
<h1 class="title">{:lang('index.faq')}</h1>
|
||||
<p class="dec">{:lang('index.faq_short_desc')}</p>
|
||||
<p class="sudec">{:lang('index.faq_desc')}</p>
|
||||
</div>
|
||||
<div class="fqaright">
|
||||
<ul class="accordion">
|
||||
{volist name="recommend_faq" id="faq"}
|
||||
<li class="fqali">
|
||||
<div class="fqa-question">
|
||||
<h3>{$faq.question} </h3>
|
||||
<span class="xiala">+</span>
|
||||
</div>
|
||||
<div class="fqa-answer">
|
||||
<p>{$faq.answer|raw}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 底部固定提示 -->
|
||||
<div class="oricofixd-info">
|
||||
<div class="ofiinfo">We use cookies to ensure you get the best experience on our website. By
|
||||
continuing to browse, you agree to our use of cookies.</div>
|
||||
<div class="ofibt"><button>OK,got it!</button></div>
|
||||
<div class="oficlose"><span class="close-btn">×</span></div>
|
||||
<div class="pageMain">
|
||||
<!-- banner -->
|
||||
{notempty name="focus_images"}
|
||||
<div class="swiper-container bannerswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="focus_images" id="focus"}
|
||||
<div class="swiper-slide">
|
||||
<a href="{$focus.link}" target="_blank"><img src="{$focus.image}" alt="{$focus.title}"></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<!-- 如果需要分页器 -->
|
||||
<div class="swiper-pagination"></div>
|
||||
<!-- 如果需要导航按钮 -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 产品分类信息 -->
|
||||
{notempty name="product_categorys"}
|
||||
<div class="catMain">
|
||||
{volist name="product_categorys" id="cate"}
|
||||
<a class="catit" href="{$cate.link}">
|
||||
<img src="{$cate.image}" src="catIcoImg" />
|
||||
<span class="catName" {notempty name="cate.title_txt_color" }style="color:{$cate.title_txt_color};"
|
||||
{/notempty}>{$cate.title}</span>
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 特色专题及公司实力 -->
|
||||
{notempty name="featured_topics"}
|
||||
<div class="featuredtopicsMain">
|
||||
<div class="ftcontent">
|
||||
{volist name="featured_topics" id="topic" mod="2"}
|
||||
<a class="ftItme" href="{$topic.link}">
|
||||
{if condition="$mod == '1'"}
|
||||
<div class="ftItme_right">
|
||||
<img src="{$topic.image}" />
|
||||
</div>
|
||||
<div class="ftItme_left">
|
||||
<p>{$topic.title}</p>
|
||||
<div class="subtitle">
|
||||
<span>{:lang('index.view_all')} ></span>
|
||||
<div class="tpicture"></div>
|
||||
</div>
|
||||
</div>
|
||||
{else/}
|
||||
<div class="ftItme_left">
|
||||
<p>{$topic.title}</p>
|
||||
<div class="subtitle">
|
||||
<span>{:lang('index.view_all')}</span>
|
||||
<div class="tpicture"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftItme_right">
|
||||
<img src="{$topic.image}" />
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 明星产品/热点产品 -->
|
||||
{notempty name="featured_products"}
|
||||
<div class="featuredProducts">
|
||||
<p class="biaoti">{:lang('index.featured_products')}</p>
|
||||
<div class="swiper fpSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="featured_products" id="product"}
|
||||
<div class="swiper-slide picture">
|
||||
<a class="primg">
|
||||
<img src="{$product.cover_image}" />
|
||||
</a>
|
||||
<div class="fpptitle">{$product.name}</div>
|
||||
<div class="subtitle">{$product.short_name}</div>
|
||||
<a class="more">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd">
|
||||
<div class="swiper-container1">
|
||||
<div class="slideshow-pag swiper-pagination"></div>
|
||||
</div>
|
||||
<div class="swiper-container swi1">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 视频宣传 -->
|
||||
{notempty name="video"}
|
||||
<div class="hotProduct">
|
||||
<div class="hotvideo">
|
||||
<iframe src="{$video.video}" title="YouTube video player" style="width:100%;height:67rem;z-index:9999;"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen id="videoElement"></iframe>
|
||||
</div>
|
||||
<img src="{$video.image}" class="hotImg" />
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 场景介绍 -->
|
||||
{notempty name="scenes"}
|
||||
<div class="sceneIntroduction">
|
||||
{volist name="scenes" id="scene"}
|
||||
<div class="sceneitem">
|
||||
<div class="sceneInfo">
|
||||
<p class="scenetitle" {notempty name="scene.title_txt_color" }style="color:{$scene.title_txt_color};"
|
||||
{/notempty}>{$scene.title}</p>
|
||||
<p class="subtitle" {notempty name="scene.desc_txt_color" }style="color:{$scene.desc_txt_color};" {/notempty}>
|
||||
{$scene.desc|raw}</p>
|
||||
<a class="sceneMore" href="{$scene.link}">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
<div style="background-image: url('{$scene.image}');" class="sceneimg"></div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- orico科技 -->
|
||||
<div class="oricoTechnology">
|
||||
<p class="ottitle">{:lang('index.orico_technology')}</p>
|
||||
<span class="otsbtitle">{:lang('index.orico_technology_desc')}</span>
|
||||
<div class="beforeafter ba-slider">
|
||||
<!-- 对比前的图片 -->
|
||||
<img src="static/index/images/indeximg1.jpg">
|
||||
<div class="resize">
|
||||
<!-- 对比后的图片 -->
|
||||
<img src="static/index/images/indeximg2.jpg">
|
||||
</div>
|
||||
<!-- 可拖动的分隔条 -->
|
||||
<span class="handle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 品牌故事 -->
|
||||
{notempty name="brand_story"}
|
||||
<div class="brandStory">
|
||||
<div class="swiper brandStoryswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="brand_story" id="story"}
|
||||
<div class="swiper-slide bsitem">
|
||||
<div class="itmImg">
|
||||
<img src="{$story.image}" class="bsImg" />
|
||||
</div>
|
||||
<div class="bsinf">
|
||||
<div class="bstitle" {notempty name="story.title_txt_color" }style="color:{$story.title_txt_color};"
|
||||
{/notempty}>{$story.title}</div>
|
||||
<div class="bssubtitle" {notempty name="story.desc_txt_color" }style="color:{$story.desc_txt_color};"
|
||||
{/notempty}>{$story.desc|raw}</div>
|
||||
<a class="bsmore" href="{$story.link}">{:lang('index.learn_more')} ></a>
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd bs_swiperasd" id="timeline">
|
||||
<div class="bs_swcontainer">
|
||||
<div class="swiper-pagination bs_pagination"></div>
|
||||
<hr>
|
||||
<!-- <span class="time1">2021</span> -->
|
||||
<!-- <span class="time2">2022</span> -->
|
||||
<!-- <span class="time3">2023</span> -->
|
||||
</div>
|
||||
<div class="swiper-container bs_bts">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png" alt="" />
|
||||
<img class="slideshow-btn swiper-button-prev " src="static/index/temp_images/lefta.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 数据统计-->
|
||||
{notempty name="data_statistics"}
|
||||
<div class="oricoDataStatistics">
|
||||
<div class="odsmain">
|
||||
{volist name="data_statistics" id="ods"}
|
||||
<div class="odsItem">
|
||||
<h1 {notempty name="ods.desc_txt_color" }style="color:{$ods.desc_txt_color};" {/notempty}>{$ods.desc|raw}</h1>
|
||||
<h3 {notempty name="ods.title_txt_color" }style="color:{$ods.title_txt_color};" {/notempty}>{$ods.title}</h3>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 文章轮播 -->
|
||||
{notempty name="recommend_articles"}
|
||||
<div class="oricoPub">
|
||||
<div class="swiper pubswiper">
|
||||
<div class="swiper-wrapper">
|
||||
{volist name="recommend_articles" id="article"}
|
||||
<div class="swiper-slide pubSwitem">
|
||||
<a class="pubimgdiv" href="{:url('article/index', ['id' => $article.id])}">
|
||||
<img src="{$article.image}" class="pubimg" />
|
||||
</a>
|
||||
<a class="pubinfo">
|
||||
<span>{$article.title}</span>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
<div class="swiperasd pubswiperasd">
|
||||
<div class="swiper-container">
|
||||
<img class="slideshow-btn swiper-button-next" src="static/index/temp_images/rightcheck.png">
|
||||
<img class="slideshow-btn swiper-button-prev" src="static/index/temp_images/lefta.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- FAQ-->
|
||||
{notempty name="recommend_faq"}
|
||||
<div class="oricoFQA">
|
||||
<div class="fqaleft">
|
||||
<h1 class="title">{:lang('index.faq')}</h1>
|
||||
<p class="dec">{:lang('index.faq_short_desc')}</p>
|
||||
<p class="sudec">{:lang('index.faq_desc')}</p>
|
||||
</div>
|
||||
<div class="fqaright">
|
||||
<ul class="accordion">
|
||||
{volist name="recommend_faq" id="faq"}
|
||||
<li class="fqali">
|
||||
<div class="fqa-question">
|
||||
<h3>{$faq.question} </h3>
|
||||
<span class="xiala">+</span>
|
||||
</div>
|
||||
<div class="fqa-answer">
|
||||
<p>{$faq.answer|raw}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/notempty}
|
||||
<!-- 底部固定提示 -->
|
||||
<div class="oricofixd-info">
|
||||
<div class="ofiinfo">We use cookies to ensure you get the best experience on our website. By
|
||||
continuing to browse, you agree to our use of cookies.</div>
|
||||
<div class="ofibt"><button>OK,got it!</button></div>
|
||||
<div class="oficlose"><span class="close-btn">×</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
{block name="script"}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
let initialLeft;
|
||||
$('.drag-circle').mousedown(function(e) {
|
||||
isDragging = true;
|
||||
startX = e.pageX;
|
||||
initialLeft = $('.drag-circle').position().left;
|
||||
});
|
||||
$(document).mousemove(function(e) {
|
||||
if (isDragging) {
|
||||
const currentX = e.pageX;
|
||||
const diffX = currentX - startX;
|
||||
let newLeft = initialLeft + diffX;
|
||||
const containerWidth = $('.beforeafter').width();
|
||||
newLeft = Math.max(20, Math.min(containerWidth - 20, newLeft));
|
||||
$('.drag-circle').css('left', newLeft);
|
||||
$('#before').width(newLeft);
|
||||
}
|
||||
});
|
||||
$(document).mouseup(function() {
|
||||
isDragging = false;
|
||||
$(document).ready(function () {
|
||||
// 初始化 beforeafter 插件
|
||||
$('.ba-slider').beforeAfter({
|
||||
startPercent: 50, // 初始分隔条位置为 50%
|
||||
handle: '.handle', // 指定分隔条元素的选择器
|
||||
resize: '.resize' // 指定可调整大小部分的选择器
|
||||
});
|
||||
|
||||
// 底部关闭
|
||||
$(".oficlose").on("click", function() {
|
||||
$(".oricofixd-info").hide();
|
||||
$(".oficlose").on("click", function () {
|
||||
$(".oricofixd-info").hide();
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
});
|
||||
$(function () {
|
||||
// banner轮播
|
||||
var mySwiper = new Swiper('.bannerswiper', {
|
||||
// 配置选项
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
// 配置选项
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
var fpSwiper = new Swiper(".fpSwiper", {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
slidesPerGroup: 1,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
slidesPerView: "auto",
|
||||
centeredSlides: true,
|
||||
loopFillGroupWithBlank: true,
|
||||
loopAdditionalSlides: 3,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "progressbar",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
slidesPerGroup: 1,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
slidesPerView: "auto",
|
||||
centeredSlides: true,
|
||||
loopFillGroupWithBlank: true,
|
||||
loopAdditionalSlides: 3,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "progressbar",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
//品牌故事轮播
|
||||
var brandStoryswiper = new Swiper(".brandStoryswiper", {
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
// 宣传banner
|
||||
var pubswiper = new Swiper(".pubswiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
//slidesPerView: 1,
|
||||
slidesPerView: "auto",
|
||||
centeredSlides: true,
|
||||
spaceBetween: 32,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
click: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
//slidesPerView: 1,
|
||||
slidesPerView: "auto",
|
||||
centeredSlides: true,
|
||||
spaceBetween: 32,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
click: true
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
// FAQ问答展开收起
|
||||
$(".fqali").on('click', function() {
|
||||
if ($(this).children("div.fqa-answer").is(':visible')) {
|
||||
$(".fqali").removeClass('active');
|
||||
$(".fqa-answer").hide();
|
||||
$(".text-name").addClass('text-hidden');
|
||||
$(".xiala").text('+');
|
||||
} else {
|
||||
$(".fqali").removeClass('active');
|
||||
$(".fqa-answer").hide();
|
||||
$(".text-name").addClass('text-hidden')
|
||||
$(".xiala").text('+');
|
||||
$(this).addClass('active');
|
||||
$(this).children('div.fqa-answer').show();
|
||||
$(this).children('div.fqa-question').find('span').text('-');
|
||||
$(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
|
||||
}
|
||||
$(".fqali").on('click', function () {
|
||||
if ($(this).children("div.fqa-answer").is(':visible')) {
|
||||
$(".fqali").removeClass('active');
|
||||
$(".fqa-answer").hide();
|
||||
$(".text-name").addClass('text-hidden');
|
||||
$(".xiala").text('+');
|
||||
} else {
|
||||
$(".fqali").removeClass('active');
|
||||
$(".fqa-answer").hide();
|
||||
$(".text-name").addClass('text-hidden')
|
||||
$(".xiala").text('+');
|
||||
$(this).addClass('active');
|
||||
$(this).children('div.fqa-answer').show();
|
||||
$(this).children('div.fqa-question').find('span').text('-');
|
||||
$(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 首先隐藏视频元素和加载中的图片 要放开注释
|
||||
$("#hotvideo").hide();
|
||||
// 监听视频的加载事件
|
||||
setTimeout(function() {
|
||||
$("#hotvideo").on("load", function() {
|
||||
// 视频加载完成时，显示视频元素，隐藏加载中的图片
|
||||
$("#hotvideo").show();
|
||||
$("#hotImg").hide();
|
||||
});
|
||||
setTimeout(function () {
|
||||
$("#hotvideo").on("load", function () {
|
||||
// 视频加载完成时，显示视频元素，隐藏加载中的图片
|
||||
$("#hotvideo").show();
|
||||
$("#hotImg").hide();
|
||||
});
|
||||
}, 1000);
|
||||
// 监听视频的加载失败事件
|
||||
setTimeout(function() {
|
||||
$("#hotvideo").on("error", function() {
|
||||
// 视频加载失败时，显示加载中的图片，隐藏视频元素
|
||||
$("#hotImg").show();
|
||||
$("#videoElement").hide();
|
||||
});
|
||||
setTimeout(function () {
|
||||
$("#hotvideo").on("error", function () {
|
||||
// 视频加载失败时，显示加载中的图片，隐藏视频元素
|
||||
$("#hotImg").show();
|
||||
$("#videoElement").hide();
|
||||
});
|
||||
}, 1500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
@@ -10,12 +10,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/public.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_header.css" />
|
||||
<link rel="stylesheet" type="text/css" href="__CSS__/orico_footer.css" />
|
||||
{block name="style"}{/block}
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
|
||||
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
|
||||
<script type="text/javascript" src="/static/index/js/before-after.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{block name="header"}
|
||||
|
||||
Reference in New Issue
Block a user