在网站开发过程中，难免遇到各样的需求，比如今天小编分享的就是在产品详情页中点击小图片切换产品大图片的功能代码。话不多说，直接分享代码，亲测可用，资源来自于网上有修改。

在网站开发过程中，难免遇到各样的需求，比如今天小编分享的就是在产品详情页中点击小图片切换产品大图片的功能代码。话不多说，直接分享代码，亲测可用，资源来自于网上有修改。

<html>
<head>
</head>
<style>
    .pro_detail_left{width:380px;float:left;overflow:hidden}
    .pro_detail_left .jqzoom{border:1px solid #BBB;float:left;position:relative;padding:0;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}
</style>
<body>
<div class="pro_detail_left">
    <div class="jqzoom">
        <img id="bigImg" src="product-1.png" class="fs" alt=""/>
    </div>
    <ul class="imgList">
        <li>
            <img src="product-1.png" alt=""/></li>
        <li>
            <img src="product-2.png" alt=""/></li>
        <li>
            <img src="product-1.png" alt=""/></li>
    </ul>
</div>
</body>
<script src="jquery-1.2.min.js"></script>
<script>
    $(function () {
//live ：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
       $(".pro_detail_left ul li img").on("click", function () {  // 此处有使永live绑定事件的，小编使用的on事件，可以什么事件都不用。
//获得当前选择颜色图片的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 + unit;//结果：例如："images/pro_img/blue_one_small.jpg"
            var Imgsrc_big = Imgsrc + unit;//结果：例如："images/pro_img/blue_one_big.jpg"
//给大图的src属性和jqimg属性赋值
            $("#bigImg").attr({"src": Imgsrc_small, "jqimg": Imgsrc_big});
//给观看清晰图片的src属性赋值
            $("#thickImg").attr("href", Imgsrc_big);
        });
    });

</script>
</html>