$(document).ready(function() {
    var page = 1;
    var i = 3; //每版放3个图片
    //向后 按钮
    $("#img_next").click(function() {    //绑定click事件
        var $v_show = $("div.thumb_list");
        var $v_content = $("div.thumb_box");
        var v_width = $v_content.width();
        var len = $v_show.find("li").length;
        var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数
        if (!$v_show.is(":animated")) {    //判断是否正在处于动画
            if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                $v_show.animate({ left: '0px' }, "slow"); //通过改变left值，跳转到第一个版面
                page = 1;
            } else {
                $v_show.animate({ left: '-=' + v_width }, "slow");  //通过改变left值，达到每次换一个版面
                page++;
            }
        }
    });
    //往前 按钮
    $("#img_prev").click(function() {
        var $v_show = $("div.thumb_list");
        var $v_content = $("div.thumb_box");
        var v_width = $v_content.width();
        var len = $v_show.find("li").length;
        var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数
        if (!$v_show.is(":animated")) {    //判断是否正在处于动画
            if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                $v_show.animate({ left: '-=' + v_width * (page_count - 1) }, "slow");
                page = page_count;
            } else {
                $v_show.animate({ left: '+=' + v_width }, "slow");
                page--;
            }
        }
    });

    /*点击左侧产品小图片切换大图*/

    $(".thumb_list ul li img").click(function() {
        var imgSrc = $(this).attr("src");
        var i = imgSrc.lastIndexOf(".");
        var unit = imgSrc.substring(i);
        imgSrc = imgSrc.substring(0, i);
        var imgSrc_small = imgSrc + "_small" + unit;
        var imgSrc_big = imgSrc + "_big" + unit;
        $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big, "alt": $(this).attr("alt") });
        $("#thickImg").attr("href", imgSrc_big);
        $("#thickImg").attr("title", $(this).attr("alt"));
    });

    /*使用jqzoom*/

    $(".jqzoom").jqueryzoom({
        xzoom: 225, //放大图的宽度(默认是 200)
        yzoom: 259, //放大图的高度(默认是 200)
        offset: 10, //离原图的距离(默认是 10)
        position: "right", //放大图的定位(默认是 "right")
        preload: 1
    });

    $("#div_colorlist img").click(function() {
        if ($(this)) {
            var $divParent = $(this).parent("div");
            var colorName = $divParent.children("span").html();
            var $valueBox = $("#div_colorlist :hidden");
            $valueBox.val("color:" + colorName);
            $("#div_colorlist img").removeClass("img_select");
            $(this).addClass("img_select");
        }
    });
});