<div id="preview">

                    <div id="mediumDiv">

                        <img id="mImg" src="data:images/products/product-s1-m.jpg"/>

                        <div id="mask"></div>

                        <div id="superMask"></div>

                    </div>

                    <div id="largeDiv"></div>

                    <h1>

                        <a class="backward_disabled"></a>

                        <a class="forward"></a>

                        <ul id="icon_list">

                                <li><img src="data:images\products\product-s1.jpg" /></li>

                                <li><img src="data:images\products\product-s2.jpg" /></li>

                                <li><img src="data:images\products\product-s3.jpg" /></li>

                                <li><img src="data:images\products\product-s4.jpg" /></li>

                                <li><img src="data:images\products\product-s1.jpg" /></li>

                                <li><img src="data:images\products\product-s2.jpg" /></li>

                                <li><img src="data:images\products\product-s3.jpg" /></li>

                                <li><img src="data:images\products\product-s4.jpg" /></li>

                        </ul>

                    </h1>

 </div>

var pPhoto = {

    LIWIDTH : 62, //每个小图片的li的固定宽度

    moved : 0, //记录左移小图片的个数

    count : 0, //记录小图片的总数

    ul: null,   //小图父元素ul

    btnL: null,   //左边按钮 控制右移

    btnR : null,

    superMark :null,

    SUPERWIDTH : 350, //supermask的宽高

    SUPERHEIGHT :350,

    MASKWIDTH:175,      //遮罩层mask的宽高

    MASKHEIGHT:175,

    inti : function (){ //初始化方法

        this.ul = $("#icon_list")[0];

        this.ul.onmouseover =this.changeMImg;

        this.btnL = this.ul.parentNode.$("a")[0];

        this.btnR = this.ul.parentNode.$("a")[1];

        this.btnR.onclick=this.btnL.onclick=function () {

            pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法

            //将move的this指向pPhoto对象

        };

        this.count = this.ul.$("li").length;

        //图片放大效果遮罩层

        this.supermask = $("#superMask")[0];

        this.supermask.onmouseover=this.supermask.onmouseout=this.showMask;

        this.supermask.onmousemove = function(){

            var e = window.event || arguments[0];

            pPhoto.zoom(e);

        }

    },

    move : function (btn){//移动方法

        if(!btn.className.endsWith("_disabled")) {

            if (btn == this.btnR) { //判断当前btn的左右

                this.ul.style.left = -(this.LIWIDTH * (++this.moved) - 20) + "px";

                //-20  根据css原left属性进行修正

            } else {

                this.ul.style.left = -(this.LIWIDTH * (--this.moved) - 20) + "px";

            }

            this.btnEnable();

        }

    },

    btnEnable : function (){//修改按钮状态方法   this-->pPhoto

        if(this.moved==0){

            this.btnL.className+="_disabled";

        }else if(this.count-this.moved==5){

            this.btnR.className+="_disabled";

        }else{

            this.btnL.className=this.btnL.className.replace("_disabled","");

                                                //replace()方法并不能直接修改calssname的属性值 需要重新赋值

            this.btnR.className=this.btnR.className.replace("_disabled","");

        }

    },

    changeMImg :function (){ //this-->ul

        //获取事件对象

        var e = window.event || arguments[0];

        //获取目标对象

        var src=e.srcElemnt||e.target;

        if(src.nodeName=="IMG"){

            var path = src.src;

            var i = path.lastIndexOf(".");

            $("#mImg")[0].src=path.slice(0,i)+"-m"+path.slice(i);

        }

    },

    showMask : function(){

        var mask = $("#mask")[0];

        var style = getComputedStyle(mask);

        var largeDiv = $("#largeDiv")[0];

        largeDiv.style.display=mask.style.display=style.display=="none"?"block":"none";

        if(largeDiv.style.display=="block"){

            var path = $("#mImg")[0].src;

            var i=path.lastIndexOf(".");

            $("#largeDiv")[0].style.backgroundImage="url('"+path.slice(0,i-1)+"l"+path.slice(i)+"')";

        }

    },

    zoom :function (e){

        var x=e.offsetX

        var y=e.offsetY;

        var mLeft = x-this.MASKWIDTH/2;

        var mTop = y-this.MASKHEIGHT/2;

        mLeft<0 && (mLeft=0);

        mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);

        mTop<0 && (mTop=0);

        mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);

        var mask = $("#mask")[0];

        mask.style.left=mLeft+"px";

        mask.style.top=mTop+"px";

        var largeDiv = $("#largeDiv")[0]

        largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";

    }

}

this.btnR.onclick=this.btnL.onclick=function () {

            pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法

            //将move的this指向pPhoto对象

 };

 this.supermask.onmousemove = function(){

            var e = window.event || arguments[0];

            //获取事件对象e 作为参数传递给 放大方法zoom;

            pPhoto.zoom(e);

 }

 zoom :function (e){ //zoom函数类无法获得 sueromask元素的事件对象e

        var x=e.offsetX

        var y=e.offsetY;

        var mLeft = x-this.MASKWIDTH/2;

        var mTop = y-this.MASKHEIGHT/2;

        mLeft<0 && (mLeft=0);

        mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);

        mTop<0 && (mTop=0);

        mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);

        var mask = $("#mask")[0];

        mask.style.left=mLeft+"px";

        mask.style.top=mTop+"px";

        var largeDiv = $("#largeDiv")[0]

        largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";

    }