點擊下面鏈接查看效果：
http:///keleyi/phtml/jqtexiao/19.htm
本效果只適合jquery 1.9.0以下的版本，例如1.8.3（http:///keleyi/pmedia/jquery-1.8.3.min.js）。
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>產品多圖展示帶放大鏡代碼 - </title>
<link href="http:///keleyi/phtml/jqtexiao/19/css/css.css" type="text/css" rel="stylesheet">
<script src="http:///keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http:///keleyi/phtml/jqtexiao/19/js/base.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<div id="preview">
<div class="jqzoom" id="spec-n1" onclick="window.open('http:///a/bjad/pmryuvga.htm')">
<img height="350" src="http:///keleyi/phtml/jqtexiao/19/images/img05.jpg" jqimg="http:///keleyi/phtml/jqtexiao/19/images/img05.jpg" width="350">
</div>
<div id="spec-n5">
<div class="control" id="spec-left">
<img src="http:///keleyi/phtml/jqtexiao/19/images/left.gif" />
</div>
<div id="spec-list">
<ul class="list-h">
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img01.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img02.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img03.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img04.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img05.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img06.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img07.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img08.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img09.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img10.jpg">
</li>
<li>
<img src="http:///keleyi/phtml/jqtexiao/19/images/img11.jpg">
</li>
</ul>
</div>
<div class="control" id="spec-right">
<img src="http:///keleyi/phtml/jqtexiao/19/images/right.gif" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".jqzoom").jqueryzoom({
xzoom: 400,
yzoom: 400,
offset: 10,
position: "right",
preload: 1,
lens: 1
});
$("#spec-list").jdMarquee({
deriction: "left",
width: 350,
height: 56,
step: 2,
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": "2px solid #ff6600",
"padding": "1px"
});
}).bind("mouseout", function () {
$(this).css({
"border": "1px solid #ccc",
"padding": "2px"
});
});
})
</script>
<script src="http:///keleyi/phtml/jqtexiao/19/js/lib.js" type="text/javascript"></script>
<script src="http:///keleyi/phtml/jqtexiao/19/js/keleyi.js" type="text/javascript"></script>
</div>
<div style="text-align: center; clear: both">
<p>
適用浏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>
來源：<a href="http:///" target="_blank"></a></p>
</div>
</body>
</html>