window.onload = function(){
    var preview = document.getelementbyid('preview');//获取中图可视区元素
    var big = document.getelementbyid('img-big');//获取大图显示div元素
    var bigimg = big.getelementsbytagname('img')[0];//大图img元素
    var medium = document.getelementbyid('img-medium');//中图div元素
    var mediumimg = medium.getelementsbytagname('img')[0];//中图img元素
    var mark = document.getelementbyid('mark');//遮罩层元素
    var detail = document.getelementbyid('detail');

    medium.onmouseover = function(){
        mark.style.display = "block";
        big.style.display = "block";
    }
    medium.onmouseout = function(){
        mark.style.display = "none";
        big.style.display = "none";
    }

    medium.onmousemove = function(e){
        var e = e || window.event;
        var left = e.clientx - preview.offsetleft-mark.offsetwidth/2;
        var top = e.clienty - preview.offsettop-mark.offsetheight/2;
        var markoffsetwidth = mark.offsetwidth;
        var mediumoffsetwidth = this.offsetwidth;
        //判断放大镜遮罩层溢出
        if(left<0){
            left = 0;
        }else if(left > mediumoffsetwidth - markoffsetwidth){
            left = mediumoffsetwidth - markoffsetwidth;
        }
        if(top<0){
            top = 0;
        }else if(top > mediumoffsetwidth - markoffsetwidth){
            top = mediumoffsetwidth - markoffsetwidth;
        }
        mark.style.left = left+'px';
        mark.style.top = top+'px';
        //计算大图随着遮罩层移动显示的百分比
        persentx = left/(mediumoffsetwidth - markoffsetwidth);
        persenty = top/(mediumoffsetwidth - markoffsetwidth);
        detail.style.left = -persentx*big.clientwidth+'px';
        detail.style.top = -persenty*big.clientheight+'px';
    }
    //小图导航
    var imgitems = document.getelementbyid('img-items');
    var linodes = imgitems.childnodes;
    var tmpnodes = [];
    //循环只保留li节点
    for(var i=0;i<linodes.length;i++){
        if(linodes[i].nodetype == 3) continue;
        tmpnodes.push(linodes[i]);
    }
    var linum = tmpnodes.length;//li节点总数
    var liwidth = parseint(getcurrentstyle(tmpnodes[0])["width"]);//获取每个li的width值
//  console.info(tmpnodes[0]);
    var lino1 = tmpnodes[0].getelementsbytagname('img')[0];
        lino1.style.border= "2px solid #b1262a";

        lino1.style.width = "52px";
        lino1.style.height = "52px";
        imgitems.style.width = liwidth*linum+'px';
    //循环每个li导航节点绑定鼠标滑过事件
    for(var j=0;j<linum;j++){
        tmpnodes[j].index = j;
        tmpnodes[j].onmouseover = function(){
            var img = this.getelementsbytagname('img')[0];
            img.style.border = "2px solid #b1262a";
            img.style.width = "52px";
            img.style.height = "52px";
            var _this = this;
            //判断取消li的兄弟节点的鼠标滑过样式
            for(var k=0;k<linum;k++){
                if(k != _this.index){
                    var imgi = tmpnodes[k].getelementsbytagname('img')[0];
                    imgi.style.border = "none";
                    imgi.style.width = "54px";
                    imgi.style.height = "54px";     
                }
            }
            //获取大图总图替换大图中图src属性加载大图中图
            mediumimg.setattribute('src',img.getattribute('msrc'));
            bigimg.setattribute('src',img.getattribute('bsrc'));
        }

    }

    //导航左右按钮
    var totalwidth = liwidth*linum;
    var mcount = linum - 5;
    // alert(mcount);return;
    var now = 0;//小图左右移动计数器
    var lbtn = document.getelementbyid('left');
    var rbtn = document.getelementbyid('right');
    //小图标导航向左移动
    lbtn.onclick = function(){
        if(now == 0){
            now = 0;
        }else{                   
            now--;
            var timeid = setinterval(function(){
                imgitems.style.left = (parseint(getcurrentstyle(imgitems)["left"])+1)+'px';
                
                if(parseint(getcurrentstyle(imgitems)["left"]) >= -now*liwidth){
                    clearinterval(timeid);
                }
            },10);
        }
    }
    //小图标导航向右移动
    rbtn.onclick = function(){
    	
        if(now < mcount){
            now++;
          
            var timeid = setinterval(function(){
                imgitems.style.left = (parseint(getcurrentstyle(imgitems)["left"])-1)+'px';
             
                if(parseint(getcurrentstyle(imgitems)["left"]) <= -now*liwidth){
                    clearinterval(timeid);
                }
            },10);
        }
    }
    //获取style样式兼容
    function getcurrentstyle(node) {
//  	console.info(1);
    	var ss=window.getcomputedstyle ? window.getcomputedstyle(node,null):node.correntstyle;
        return ss;
    }
}