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

秒客网