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 129e9aecb3
commit 602456add9
7 changed files with 177 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}