jquery点击颜色切换图片

jquery

//根据颜色换大图
	$(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");
		//更换字体 
		$(".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();
		}
		})
	})

html

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

效果

切换前

切换后