定位切换图片

定位切换

<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>

效果图：