<div id="box">                    <pre class="prev"></pre>                    <pre class="next"></pre>                    <ul>                                          <li><img alt="左诗桓|/cs201401237164/info_48.aspx?itemid=233|副教授|副主任|研究所二" src="/cs201401237164/uploadfiles/2014/09/201409241141104110.jpg" width="219" height="261" /></li>                                  <li><img alt="彭平桂|/cs201401237164/info_48.aspx?itemid=231|正教授|主任|研究所一" src="/cs201401237164/uploadfiles/2014/09/201409241126352635.jpg" width="219" height="261" /></li>                                  <li><img alt="李长罗|/cs201401237164/info_48.aspx?itemid=230|正教授|主任|研究所二" src="/cs201401237164/uploadfiles/2014/09/201409241125152515.jpg" width="219" height="261" /></li>                                  <li><img alt="袁子杰|/cs201401237164/info_48.aspx?itemid=227|正教授|副主任|医技一" src="/cs201401237164/uploadfiles/2014/09/20140924105305535.jpg" width="219" height="261" /></li>                                  <li><img alt="龙章改|/cs201401237164/info_48.aspx?itemid=226|正教授|主任|医技一" src="/cs201401237164/uploadfiles/2014/09/201409241049594959.jpg" width="219" height="261" /></li>                                  <li><img alt="杨学抗|/cs201401237164/info_48.aspx?itemid=223|正教授|主任|外科一" src="/cs201401237164/uploadfiles/2014/09/201409241039293929.jpg" width="219" height="261" /></li>                                  <li><img alt="白剑|/cs201401237164/info_48.aspx?itemid=222|正教授|主任|外科一" src="/cs201401237164/uploadfiles/2014/09/201409241037313731.jpg" width="219" height="261" /></li>                                  <li><img alt="李彪|/cs201401237164/info_48.aspx?itemid=221|副教授|副主任|内科二" src="/cs201401237164/uploadfiles/2014/09/201409241029432943.jpg" width="219" height="261" /></li>                                  <li><img alt="戴海鹰|/cs201401237164/info_48.aspx?itemid=219|正教授|主任|内科一" src="/cs201401237164/uploadfiles/2014/09/201409241024302430.jpg" width="219" height="261" /></li>                                  <li><img alt="黄红光|/cs201401237164/info_48.aspx?itemid=218|正教授|主任|内科一" src="/cs201401237164/uploadfiles/2014/09/201409241021152115.jpg" width="219" height="261" /></li>                                    </ul>                </div>

// JavaScript Documentfunction ZoomPic (){    this.initialize.apply(this, arguments)    }ZoomPic.prototype ={    initialize: function (id) {        var _this = this;        this.wrap = typeof id === "string" ? document.getElementById(id) : id;        this.oUl = this.wrap.getElementsByTagName("ul")[0];        this.aLi = this.wrap.getElementsByTagName("li");        this.prev = this.wrap.getElementsByTagName("pre")[0];        this.next = this.wrap.getElementsByTagName("pre")[1];        this.timer = null;        this.aSort = [];        this.iCenter = 3;        this._doPrev = function () { return _this.doPrev.apply(_this) };        this._doNext = function () { return _this.doNext.apply(_this) };        this.options = [            { width: 120, height: 160, top: 71, left: 134, zIndex: 1 },            { width: 161, height: 201, top: 40, left: 101, zIndex: 2 },            { width: 176, height: 219, top: 32, left: 182, zIndex: 3 },            { width: 219, height: 271, top: 0, left: 278, zIndex: 4 },            { width: 176, height: 219, top: 32, left: 405, zIndex: 3 },            { width: 161, height: 201, top: 40, left: 496, zIndex: 2 },            { width: 120, height: 160, top: 71, left: 496, zIndex: 1 }        ];        for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];        this.aSort.unshift(this.aSort.pop());        this.setUp();        this.addEvent(this.prev, "click", this._doPrev);        this.addEvent(this.next, "click", this._doNext);        this.doImgClick();        this.timer = setInterval(function () {            _this.doNext();        }, 3000);        //this.wrap.onmouseover = function () {        //    clearInterval(_this.timer)        //};        this.wrap.onclick = function () {            clearInterval(_this.timer)            _this.timer = setInterval(function () {                _this.doNext()            }, 3000);        }        var value = http://www.mamicode.com/this.getElementsByTagName("img")[0].alt;        AddValue(value);    },    doPrev: function () {        this.aSort.unshift(this.aSort.pop());        this.setUp()    },    doNext: function () {        this.aSort.push(this.aSort.shift());        this.setUp()    },    doImgClick: function () {        var _this = this;        for (var i = 0; i < this.aSort.length; i++) {            this.aSort[i].onclick = function () {                if (this.index > _this.iCenter) {                    for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());                    _this.setUp()                }                else if (this.index < _this.iCenter) {                    for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());                    _this.setUp()                }            }        }    },    setUp: function () {        var _this = this;        var i = 0;        for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);        for (i = 0; i < this.aSort.length; i++) {            this.aSort[i].index = i;            if (i < 7) {                this.css(this.aSort[i], "display", "block");                this.doMove(this.aSort[i], this.options[i], function () {                    _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], { opacity: 100 }, function () {                        _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], { opacity: 100 }, function () {                            _this.aSort[_this.iCenter].onmouseover = function () {                                _this.doMove(this.getElementsByTagName("div")[0], { bottom: 0 })                            };                            _this.aSort[_this.iCenter].onmouseout = function () {                                _this.doMove(this.getElementsByTagName("div")[0], { bottom: -100 })                            }                        })                    })                });            }            else {                this.css(this.aSort[i], "display", "none");                this.css(this.aSort[i], "width", 0);                this.css(this.aSort[i], "height", 0);                this.css(this.aSort[i], "top", 37);                this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)            }            if (i < this.iCenter || i > this.iCenter) {                this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30)                this.aSort[i].onmouseover = function () {                    _this.doMove(this.getElementsByTagName("img")[0], { opacity: 100 })                };                this.aSort[i].onmouseout = function () {                    _this.doMove(this.getElementsByTagName("img")[0], { opacity: 35 })                };                this.aSort[i].onmouseout();            }            else {                this.aSort[i].onmouseover = this.aSort[i].onmouseout = null            }            var value = http://www.mamicode.com/_this.aSort[this.iCenter].getElementsByTagName("img")[0].alt;            AddValue(value);        }    },    addEvent: function (oElement, sEventType, fnHandler) {        return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)    },    css: function (oElement, attr, value) {        if (arguments.length == 2) {            return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]        }        else if (arguments.length == 3) {            switch (attr) {                case "width":                case "height":                case "top":                case "left":                case "bottom":                    oElement.style[attr] = value + "px";                    break;                case "opacity":                    oElement.style.filter = "alpha(opacity=" + value + ")";                    oElement.style.opacity = value / 100;                    break;                default:                    oElement.style[attr] = value;                    break            }        }    },    doMove: function (oElement, oAttr, fnCallBack) {        var _this = this;        clearInterval(oElement.timer);        oElement.timer = setInterval(function () {            var bStop = true;            for (var property in oAttr) {                var iCur = parseFloat(_this.css(oElement, property));                property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));                var iSpeed = (oAttr[property] - iCur) / 5;                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);                if (iCur != oAttr[property]) {                    bStop = false;                    _this.css(oElement, property, iCur + iSpeed)                }            }            if (bStop) {                clearInterval(oElement.timer);                fnCallBack && fnCallBack.apply(_this, arguments)            }        }, 30)    }};function AddValue(val) {    var arr = val.split(‘|‘);    jQuery("#txtName").html(arr[0]);    jQuery("#jieshao").attr("href", arr[1]);    jQuery("#zhichen").html(arr[2]);    jQuery("#zhiwu").html(arr[3]);    jQuery("#chuzhen").attr("href",arr[1]);    jQuery("#keshi").html(arr[4]);}window.onload = function (){    new ZoomPic("box");};