Code

jquery仿淘宝产品图片放大。
jquery仿淘宝产品图片放大。
效果预览
prev
next
代码
1.在body里加入如下HTML代码:

<div id="sl_PicShow">
    <div id="sl_ImgBox">
    </div>
    <div class="sl_SmallImgList">
        <!--前一个按钮-->
        <div id="imgList_prev"><span>prev</span></div>
        <!--图片列表-->
        <div id="sl_ImgList">
            <div><img src="pic/pic1_small.jpg" jqimg="pic/pic1.jpg" /></div>
            <div><img src="pic/pic2_small.jpg" jqimg="pic/pic2.jpg" /></div>
            <div><img src="pic/pic3_small.jpg" jqimg="pic/pic3.jpg" /></div>
            <div><img src="pic/pic4_small.jpg" jqimg="pic/pic4.jpg" /></div>
            <div><img src="pic/pic5_small.jpg" jqimg="pic/pic5.jpg" /></div>
            <div><img src="pic/pic6_small.jpg" jqimg="pic/pic6.jpg" /></div>
            <div><img src="pic/pic7_small.jpg" jqimg="pic/pic7.jpg" /></div>
            <div><img src="pic/pic8_small.jpg" jqimg="pic/pic8.jpg" /></div> 
        </div>
        <!--后一个按钮-->
        <div id="imgList_next"><span>next</span></div>
        <div class="clearfix"></div>
    </div>
</div>


说明:
img标签的src放小图的地址,jqimg放大图的地址,如果没有大图,就空着(jqimg="")

2.在head标签内加入css:

<style type="text/css">
    #sl_PicShow
    {
        width: 252px;
        position: relative;
    }
    #sl_ImgBox
    {
        width: 250px;
        height: 250px;
        overflow: hidden;
        border: 1px solid #ccc;
    }
    .sl_SmallImgList
    {
        width: 252px;
        margin: 10px auto;
    }
    .sl_wrapper
    {
        float: left;
        display: inline;
        margin: 0 5px;
    }
    #sl_ImgList div
    {
        border: 1px solid #ccc;
        background-color: white;
        width: 43px;
        height: 43px;
        overflow: hidden;
        margin: 0 5px;
        display: inline;
        float: left;
        cursor: pointer;
    }
    #sl_ImgList .active
    {
        border: 1px solid #9e1f63;
    }
    #sl_ImgList img
    {
        border: 0;
    }
    #imgList_prev, #imgList_next
    {
        width: 10px;
        height: 45px;
        display: block;
        float: left;
        display: inline;
        cursor: pointer;
    }
    #imgList_prev
    {
        background: url(images/left.gif) no-repeat;
    }
    #imgList_next
    {
        background: url(images/right.gif) no-repeat;
    }
    #imgList_prev span, #imgList_next span
    {
        display: none;
    }
    .clearfix
    {
        float: none;
        clear: both;
    }
    
    
    .sl_zoom
    {
        float: left;
        position: relative;
        display:inline;
        cursor: pointer;
    }
    .sl_zoom img
    {
        
    }
    div.zoomdiv
    {
        z-index: 100;
        position: absolute;
        top: 0px !important;
        left: 270px !important;
        width: 200px;
        height: 200px;
        background: #ffffff;
        border: 1px solid #CCCCCC;
        display: none;
        text-align: center;
        overflow: hidden;
    }
    div.jqZoomPup
    {
        z-index: 10;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 50px;
        border: 1px solid #aaa;
        background: #ffffff;
        opacity: 0.5;
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        filter: alpha(Opacity=50);
    }
    div.jqMagnifier
    {
        position: absolute;
        z-index:9;
        width: 23px;
        height: 23px;
        background: url(images/magnifier.png) no-repeat;
        top:228px;
        right:1px;
    }
</style>

3.在body底部引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.picshow.js" type="text/javascript"></script>

4.在body底部添加js代码:

<script type="text/javascript">
    $(function() {
        var imgBox = $("#sl_ImgBox"), 
        imgList = $("#sl_ImgList"), 
        imgListDiv = $("#sl_ImgList div"), 
        firstSrc = imgListDiv.find("img").first().attr("src"), 
        firstJqzSrc = imgListDiv.find("img").first().attr("jqimg");
        imgBox.html('<div class="sl_zoom"><img src="' + firstSrc + '" jqimg="' + firstJqzSrc + '" /></div>');
        var zoom_div = $(".sl_zoom"), imgBox_img = $(".sl_zoom img");
        imgList.carouFredSel({
            auto: false,
            circular: false,
            infinite: false,
            prev: "#imgList_prev",
            next: "#imgList_next",
            items: { visible: 4 },
            scroll: { items: 1 }
        });


        zoom_div.jqueryzoom({
            xzoom: 306,//设置放大窗口的宽度
            yzoom: 306,//设置放大窗口的高度
            offset: 10,
            position: "right",//放大窗口显示的位置
            preload: 1,
            lens: 1
        });
        imgBox_img.vcenter(250, 250);//产品展示图片等比例缩放居中
        vhCenter();

        imgList.find("div:eq(0)").addClass("active");
        imgListDiv.find("img").each(function() {
            $(this).vcenter(43, 43);//产品小图片等比例缩放居中
        });


        imgListDiv.click(function() {
            if ($(this).hasClass("active")) return;
            $(this).addClass("active").siblings().removeClass("active");
            imgBox_img.attr("jqimg", $(this).find("img").attr("jqimg")).
            attr("src", $(this).find("img").attr("src")).vcenter(250, 250);
            vhCenter();
        });




        function vhCenter() {
            zoom_div.css({
                "margin-top": imgBox_img.css("padding-top"),
                "margin-left": imgBox_img.css("padding-left"),
                width: imgBox_img.width(),
                height: imgBox_img.height()
            });
            imgBox_img.css({ "padding-top": 0, "padding-left": 0, "padding-right": 0, "padding-bottom": 0 });

            if (imgBox_img.attr("jqimg") == "") {
                $(".jqMagnifier").remove();
            }
            else {
                $(".jqMagnifier").remove();
                $("#sl_PicShow").append('<div class="jqMagnifier"></div>');
            }
        };
    });
</script>