vancl网站商品图片切换js放大镜- flashden源码|flash+xml|网络设计 ...企业库|免费b2b网站

直接拷贝代码即可使用。

<!–代码开始–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>
<html xmlns=”“>
<head id=”ctl00_Head1″>
<meta http-equiv=”Content-Type” content=”text/html; charset=uft-8″ />
<title> 水洗情侣休闲衬衫（男款）浅黄条纹-VANCL 凡客诚品</title>
<script type=”text/javascript” src=” 基础包–>
<link href=”” type=”text/css” rel=”stylesheet” /><!–公共css，用于控制图片–>
<link href=”” rel=”Stylesheet” /><!–公共css，用于控制图片显示位置–>
<link href=”” type=”text/css” rel=”stylesheet” /><!–局部放大镜代码–>
<link href=”” type=”text/css” rel=”stylesheet” /><!–控制左侧目录图片–>
</head>
<body id=”body”>
<script type=”text/javascript”>
//jQuery.noConflict();
var isH = false;
var bigPXoffset;
var bigPYoffset;
jQuery(document).ready(function(){
$(“.jqzoom”).jqzoom(
{

zoomWidth: 260,
zoomHeight: 300

});

bigPXoffset=598;

});

$(function(){
if($(“.size li”).length==1)
{
$(“.size li”).eq(0).click();
}
});
if ($.browser.msie) {
document.execCommand(“BackgroundImageCache”, false,true);
}
</script>
<div id=”dpy”>
<!–商品图片和信息展示–>
<div>
<!–左侧导航开始–>
<div align=”center”>
<ul id=”mycarousel”>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000658/small/2009_8_28_10_16_32_8575.jpg’ alt=’水洗情侣休闲衬衫（男款）浅黄条纹’ name=2009_8_28_10_16_32_8575.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000658/small/2009_7_24_14_14_35_4267.jpg’ alt=’水洗情侣休闲衬衫（男款）浅黄条纹’ name=2009_7_24_14_14_35_4267.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000658/small/2009_7_24_14_26_45_4775.jpg’ alt=’水洗情侣休闲衬衫（男款）浅黄条纹’ name=2009_7_24_14_26_45_4775.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000658/small/2009_7_24_14_27_57_2986.jpg’ alt=’水洗情侣休闲衬衫（男款）浅黄条纹’ name=2009_7_24_14_27_57_2986.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000658/small/2009_7_24_14_31_53_7600.jpg’ alt=’水洗情侣休闲衬衫（男款）浅黄条纹’ name=2009_7_24_14_31_53_7600.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000414/small/2009_8_26_15_4_7_1679.jpg’ alt=’双色门襟全棉针织开衫（女款）黑色’ name=2009_8_26_15_4_7_1679.jpg/></li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000414/small/2009_8_19_14_30_46_4025.jpg’ alt=’双色门襟全棉针织开衫（女款）黑色’ name=2009_8_19_14_30_46_4025.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000414/small/2009_8_19_14_32_16_538.jpg’ alt=’双色门襟全棉针织开衫（女款）黑色’ name=2009_8_19_14_32_16_538.jpg/>
</li>
<li>
<img src=’http://images.vancl.com/product/0/0/0/0000414/small/2009_8_19_14_33_17_8584.jpg’ alt=’双色门襟全棉针织开衫（女款）黑色’ name=2009_8_19_14_33_17_8584.jpg/>
</li>
</ul>
</div>
<!–左侧导航结束–>
<!–显示中图片–>
<div>
<div>
<a href=”” style=”" title=”水洗情侣休闲衬衫（男款）浅黄条纹” id=”BigViewImage”>
<img src=”” title=”" width=”400″ height=”460″ id=”productImage”>
</a>
</div>
<!–图片右侧放大镜图片–>
<!–
<p align=”right” style=”margin-top: 7px;”>
<a href=”#”
target=”_blank” title=”观看水洗情侣休闲衬衫（男款）浅黄条纹的清晰图片”>
<img src=”” width=”65″ height=”13″ border=”0″ /></a>
</p>–>
</div>

<!–右侧介绍信息开始–>
<!–右侧介绍信息结束–>
</div>
</div>
<script type=”text/javascript” src=”><!– 放大镜–>
<script type=”text/javascript” src=”><!– 左侧滚动目录–>
<script type=”text/javascript”>
function mycarousel_initCallback(carousel){
var index = 0;
$(“#mycarousel li img”).eq(index).attr(“class”,”curr”);
$(“#mycarousel li”).click(function(){
index=$(“#mycarousel li”).index(this);
$(“#productImage”)[0].src = this.getElementsByTagName(“img”)[0].src.replace(“small”,”mid”);
$(“#BigViewImage”).attr(“href”,this.getElementsByTagName(“img”)[0].src.replace(“small”,”Big”));
$(this).siblings().each(function(){
this.getElementsByTagName(“img”)[0].className=”";
})
this.getElementsByTagName(“img”)[0].className=”curr”;

});

$(“#mycarousel li”).hover(function(){
$(“#productImage”)[0].src = this.getElementsByTagName(“img”)[0].src.replace(“small”,”mid”);
this.getElementsByTagName(“img”)[0].className=”curr”;

},
function(){
var currIndex = $(“#mycarousel li”).index(this);
if(!(index == currIndex))
{
this.getElementsByTagName(“img”)[0].className=”";
}
$(“#productImage”)[0].src = $(“#mycarousel li img”).eq(index).attr(“src”).replace(“small”,”mid”);
});

temp_carousel=carousel;
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.hover(function() {
t1=setInterval(“temp_carousel.buttonNext.click()”,500);
if(typeof t2!=”undefined”)clearInterval(t2);
},
function() {
clearInterval(t1);
});
carousel.buttonPrev.hover(function() {
t2=setInterval(“temp_carousel.buttonPrev.click()”,500);
if(t1!=undefined)clearInterval(t1);
}, function(){
clearInterval(t2);
});
};
function mycarousel_initCallback2(carousel){
temp_carousel1=carousel;
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.hover(function() {
t3=setInterval(“temp_carousel1.buttonNext.click()”,5);
if(typeof t4!=”undefined”)clearInterval(t4);
},
function() {
clearInterval(t3);
});
carousel.buttonPrev.hover(function() {
t4=setInterval(“temp_carousel1.buttonPrev.click()”,5);
if(t3!=undefined)clearInterval(t3);
}, function(){
clearInterval(t4);
});

};
jQuery(document).ready(function(){
jQuery(‘#mycarousel’).jcarousel({vertical:true,initCallback:mycarousel_initCallback});

});
</script>
</body>
</html>