js图片轮播

 <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 Document

function 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 = 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 = _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");
};