定位切换
<script src="jquery/jquery-1.7.2.js" type="text/javascript"></script> ///定位切换 $(function(){ $(".color_change>ul>li>img").click(function(){ var a=$(this).attr("src"); var color=$(this).attr("alt"); /* alert(color); */ var src=a.split("img/"); /* alert(src[1]); */ var b=src[1].split(".jpg"); /* alert(b[0]); */ //更换大图 $(".jqzoom>img").attr("src","images/pro_img/"+b[0]+"_one_small.jpg"); $(".jqzoom>img").attr("jqimg","images/pro_img/"+b[0]+"_one_big.jpg"); $("#thickImg").attr("src","images/pro_img/"+b[0]+"_one_big.jpg") //更换字体 $(".color_change:first strong").html(color); //更换下面三张图片 $(".imgList li img:eq(0)").attr("src","images/pro_img/"+b[0]+"_one.jpg"); $(".imgList li img:eq(1)").attr("src","images/pro_img/"+b[0]+"_two.jpg"); $(".imgList li img:eq(2)").attr("src","images/pro_img/"+b[0]+"_three.jpg"); //绿色只有两张 如果绿色 把第三个隐藏掉 if (b[0]=="green") { $(".imgList li img:eq(2)").hide(); } else{ $(".imgList li img:eq(2)").show(); } }) }) <div class="color_change"> 颜色：<strong>蓝白</strong> <ul> <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li> <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li> <li><img src="images/pro_img/green.jpg" alt="粉绿" /></li> </ul> </div>效果图： 切换图片
<script src="jquery/jquery-1.7.2.js" type="text/javascript"></script> $(function(){ $(".imgList li img").click(function(){ var src=$(this).attr("src"); /* alert(src); */ var src=src.split("img/"); /* alert(src[1]); */ var b=src[1].split(".jpg"); /* alert(b[0]); */ //将大图与放大镜图全部更换 $(".jqzoom>img").attr("src","images/pro_img/"+b[0]+"_small.jpg"); $(".jqzoom>img").attr("jqimg","images/pro_img/"+b[0]+"_big.jpg"); $("#thickImg").attr("href","images/pro_img/"+b[0]+"_big.jpg"); }) }) <div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg" /></div> <span> <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="images/look.gif" /> </a> </span> <ul class="imgList"> <li> <img src="images/pro_img/blue_one.jpg" alt="" /> </li> <li> <img src="images/pro_img/blue_two.jpg" alt="" /> </li> <li> <img src="images/pro_img/blue_three.jpg" alt="" /> </li> </ul>效果图：
