在我们网上选购商品是会遇到商品颜色的选择 类似于： 当我们单击右侧的颜色块时 左边的展示图片也随之改变当前选择的颜色！ 思维逻辑：点击img图片按钮，左侧图片路径自行改变！
这时我们就要用到jQuery中切割字符——split
HTML代码：
<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>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"); $("#thickImg").attr("href", "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(); } }) }) //根据小图换上大图 $(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"); }) })