<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link rel="stylesheet" href="./css/jqzoom.css">
</head>
<body>
<div id="products_p_img">
<div id="preview">
<div class="jqzoom" id="spec-n1">
<img src="./images/pro-detail.png" jqimg="./images/pro-detail.png" alt="" data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px" />
</div>
<div id="spec-n5">
<div class="control" id="spec-left">
<img src="./images/left1.png" sizes="(max-width: 767px) 95vw, 750px" />
</div>
<div id="spec-list">
<ul class="list-h" style="width: 522px; overflow-x: hidden; overflow-y: hidden; ">
<li><a href="javascript:;">
<img src="./images/pro-detail.png"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
<li><a href="javascript:;">
<img src="./images/577_03b9e53f3454db05c41e7e26172f25c9.jpeg"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
<li><a href="javascript:;">
<img src="./images/pro-detail.png"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
<li><a href="javascript:;">
<img src="./images/pro-detail.png"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
<li><a href="javascript:;">
<img src="./images/pro-detail.png"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
<li><a href="javascript:;">
<img src="./images/pro-detail.png"/ data-sizes="(max-width: 767px) 350px, 322px" alt="Renewal 11 Jérôme Sorolla" class="lzy" style="--wd: 322px; --hml:188px; --hmh:211px"></a>
</li>
</ul>
</div>
<div class="control" id="spec-right">
<img src="./images/right1.png" />
</div>
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<!-- 点击左右轮播 -->
<script src="./js/jqzoom.lib.js"></script>
<!-- 放大镜 -->
<script src="./js/jqzoom.js"></script>
<script>
$(function() {
$(".jqzoom").jqueryzoom({
xzoom: 400,
yzoom: 400,
offset: 10,
position: "right",
preload: 1,
lens: 1
});
$("#spec-list").jdMarquee({
deriction: "left",
width: 670,
height: 230,
step: 1,
speed: 4,
delay: 10,
control: true,
_front: "#spec-right",
_back: "#spec-left"
});
$("#spec-list img").bind("mouseover", function() {
var src = $(this).attr("src");
$("#spec-n1 img").eq(0).attr({
src: src.replace("\/n5\/", "\/n1\/"),
jqimg: src.replace("\/n5\/", "\/n0\/")
});
$(this).css({
"border": "none",
});
}).bind("mouseout", function() {
$(this).css({
"border": "none",
});
});
})
</script>
</body>
</html>
