JQuery效果——如何切换图片颜色

1、jquery代码：

$(function () { ///鼠标移上去小图变大图 $(".imgList li img").bind("mouseover click", function () { var src = $(this).attr("src");///获取鼠标当前点击的img图片src属性 var bigimgjq = src.replace(".jpg", "_big.jpg");把".jpg"替换为 "_one_big.jpg"使所点击的图片属性变成对应的 大图的src 放大镜 $(".jqzoom img").attr({ "src": bigimgjq, jqimg: bigimgjq });///获取到放大镜的图片更换属性 //观看高清大图 $("#thickImg").attr("href", bigimgjq);///放大镜的图片添href属性 }) $(".color_change li img").click(function () { ///改变小图组 var src = $(this).attr("src");///获取鼠标点击的图片 src（黄色图标） var alt = $(this).attr("alt");///获取鼠标点击的图片 alt var src1 = src.replace(".jpg", "_one.jpg");把".jpg"替换为 "_one.jpg"使所点击的图片属性变成对应的 图片list的第一张图的src（黄色衬衣 ） var src2 = src.replace(".jpg", "_two.jpg");（黄色袖口 ） var src3 = src.replace(".jpg", "_three.jpg");（黄色领口） $(".color_change strong").text(alt); ///更改颜色的text值为点痣图片所获的alt 值 $(".imgList li img:eq(0)").attr("src", src1); ///获取到小图组的第一张图的src并替换为上面替换好的新src（黄色衬衣 ） $(".imgList li img:eq(1)").attr("src", src2); ///（黄色袖口 ） $(".imgList li img:eq(2)").attr("src", src3); ///（黄色领口） ///改变大图 var bigimgsrc = src.replace(".jpg", "_one_small.jpg");把".jpg"替换为 "_one_small.jpg"使所点击的图片属性变成对应的 大图的src var bigimgjq = src.replace(".jpg", "_one_big.jpg");把".jpg"替换为 "_one_small.jpg"使所点击的图片属性变成对应的 大图的jqzoom $(".jqzoom img").attr("src", bigimgsrc);//更换大图片的src $(".jqzoom img").attr("jqimg", bigimgjq);//更换大图片的jgimg

 html：代码

 效果图：