jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

产品详情页添加关联产品轮播；点击图册显示大图的问题，还有点击大图可以弹框观看

Browse Source
This commit is contained in:
杨丹华
2025-05-16 16:42:30 +08:00
parent d74469f719
commit 4fe451ce76
7 changed files with 177 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/index/view/index/index.html
View File

@@ -168,7 +168,7 @@
<div class="swiper-pagination bs_pagination"></div>
<hr>
{volist name="brand_story" id="story" key="k"}
<span class="time{$k}">{$story.year}</span>
<span class="time">{$story.year}</span>
{/volist}
</div>
<div class="swiper-container bs_bts">
@@ -318,6 +318,38 @@
prevEl: ".swiper-button-prev",
},
});
// 计算品牌故事轮播个数样式调整
function calculateDisplayValue (n) {
return 8 - n;
}
// 动态调整分页点和年份位置
function adjustTimeline () {
const slideCount = brandStoryswiper.slides.length; // 获取轮播项个数
if (slideCount === 0) return;
// 计算分页点间距
const bulletMargin = ((100 / slideCount) - 2) + "%";
$(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet")
.css("margin-right", bulletMargin);
// 计算年份位置（固定间隔21%）
const timeSpans = $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time");
var tag = 0
var percent = 0
var basenum = calculateDisplayValue(slideCount)
timeSpans.each(function (index) {
if (index == 1) {
tag = ((100 / slideCount)) * index - (index > 0 ? basenum : 0)
percent = tag
}
if (index > 1) {
percent = tag * index
}
$(this).css("left", `${percent}%`);
});
}
// 初始化时调用
adjustTimeline();
// 窗口Resize时重新计算（可选）
$(window).on("resize", adjustTimeline);
// 宣传banner
var pubswiper = new Swiper(".pubswiper", {
loop: true,
@@ -357,8 +389,6 @@
$(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
}
})
// 首先隐藏视频元素和加载中的图片 要放开注释
$("#hotvideo").hide();
// 监听视频的加载事件

66
app/index/view/product/detail.html
View File

@@ -144,6 +144,45 @@
</div>
</div>
{/notempty}
<!-- 关联产品 -->
<div class="glcpmain" id="related">
<div class="glcptitle">关联产品</div>
<div class="swiper-container glcpswiper">
<div class="swiper-wrapper">
<div class="swiper-slide glcpit">
<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
<div class="glinfo">
<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
<div class="t2"> ORICO-2539U3</div>
</div>
</div>
<div class="swiper-slide glcpit">
<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
<div class="glinfo">
<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
<div class="t2"> ORICO-2539U3</div>
</div>
</div>
<div class="swiper-slide glcpit">
<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
<div class="glinfo">
<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
<div class="t2"> ORICO-2539U3</div>
</div>
</div>
<div class="swiper-slide glcpit">
<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
<div class="glinfo">
<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
<div class="t2"> ORICO-2539U3</div>
</div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- 弹框-->
<div id="form_modal" class="XJmodal">
<div class="XJmodal-content">
@@ -218,6 +257,13 @@
</div>
</div>
</div>
<!-- 点击主图放大图片观看 -->
<div class="enlarge-img">
<div class="scrollbutton_01 smallImgUp"></div>
<img src=""/>
<div class="scrollbutton_01 smallImgDown"></div>
<div class="close"><span>X</span></div>
</div>
</div>
{/block}
{block name="script"}
@@ -293,6 +339,26 @@
}, 500);
}
});
/*图片放大效果*/
$(".bigImg").click(function () {
$(".enlarge-img").show();
});
$(".enlarge-img .close").click(function () {
$(".enlarge-img").hide();
});
//相关产品
var mySwiper = new Swiper('.glcpswiper', {
// 配置选项
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
{/block}