jQuery 点击小图切换大图

HTML代码：

         
<div class="pro_detail_left">
     <div class="jqzoom">
          img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" />
      </div> 
      <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>
</div>

CSS代码：

.pro_detail_left { 
	width:380px;
	float:left;
	overflow:hidden;
}

.pro_detail_left .jqzoom{
	border:1px solid #BBB;
	float:left;
	position:relative;
	padding:0px;
	cursor:pointer;
}

.pro_detail_left .fs {
	width:300px;
	height:300px; 
}


.pro_detail_left ul.imgList{
	height: 80px;
}
.pro_detail_left ul.imgList li { 
	float:left;
	margin-right:10px;  
}
.pro_detail_left ul.imgList li img { 
	width:60px; 
	height:60px; 
	padding:1px;
	background:#EEE;
	cursor:pointer; 
}
.pro_detail_left ul.imgList li img:hover { 
	padding:1px; 
	background:#999; 
}

jQuery代码：

$(function () {  
        //live ：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
    $(".pro_detail_left ul li img").live("click", function () {
        //获得当前选择颜色图片的src属性
        var Imgsrc = $(this).attr("src");
        //lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
        var i = Imgsrc.lastIndexOf(".");
        //substring() 方法用于提取字符串中介于两个指定下标之间的字符。
        var unit = Imgsrc.substring(i);//结果：".jpg"
        Imgsrc = Imgsrc.substring(0, i);//结果：例如："images/pro_img/blue_one"
        var Imgsrc_small = Imgsrc + "_small" + unit;//结果：例如："images/pro_img/blue_one_small.jpg"
        var Imgsrc_big = Imgsrc + "_big" + unit;//结果：例如："images/pro_img/blue_one_big.jpg"
        //给大图的src属性和jqimg属性赋值
        $("#bigImg").attr({ "src": Imgsrc_small, "jqimg": Imgsrc_big });
        //给观看清晰图片的src属性赋值
        $("#thickImg").attr("href", Imgsrc_big);
    });
 });