<!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=gb2312" />
<title>京东产品内页多图展示代码</title>
<link href="css/css.css" type="text/css" rel="stylesheet">
<SCRIPT src="js/jquery-1.2.6.pack.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/base.js" type=text/javascript></SCRIPT>
</head><body style="text-align:center"> <div id=preview>
<div class=jqzoom id=spec-n1 onClick="window.open('http://www.lanrentuku.com/')"><IMG height=350
src="images/img04.jpg" jqimg="images/img04.jpg" width=350>
</div>
<div id=spec-n5>
<div class=control id=spec-left>
<img src="images/left.gif" />
</div>
<div id=spec-list>
<ul class=list-h>
<li><img src="images/img01.jpg"> </li>
<li><img src="images/img02.jpg"> </li>
<li><img src="images/img03.jpg"> </li>
<li><img src="images/img04.jpg"> </li>
<li><img src="images/img01.jpg"> </li>
<li><img src="images/img02.jpg"> </li>
<li><img src="images/img03.jpg"> </li>
<li><img src="images/img04.jpg"> </li>
<li><img src="images/img01.jpg"> </li>
<li><img src="images/img02.jpg"> </li>
<li><img src="images/img03.jpg"> </li>
<li><img src="images/img04.jpg"> </li>
</ul>
</div>
<div class=control id=spec-right>
<img src="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="js/lib.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/163css.js" type=text/javascript></SCRIPT> <p>来源：<a href="http://www.360buy.com/product/251496.html" target="_blank">京东360</a> 代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a> 感谢：<a href="http://www.163css.com/" target="_blank">网聚(浩奇)</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<p><p>jquery京东产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，大图尺寸650x650，推荐下载！</p></p>
<p></p>
</body>
</html> |
注册 登录
