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.getelementsbyclassname("poster-btn")[0]; this.next = this.wrap.getelementsbyclassname("poster-btn")[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:160, height:80, top:71, left:134, zindex:1}, {width:320, height:160, top:45, left:0, zindex:2}, {width:400, height:200, top:23, left:80, zindex:3}, {width:500, height:250, top:-2, left:180, zindex:4}, {width:400, height:200, top:23, left:380, zindex:3}, {width:320, height:160, top:45, left:550, zindex:2}, //{width:160, height:80, 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() }, 8000); this.wrap.onmouseover = function () { clearinterval(_this.timer) }; this.wrap.onmouseout = function () { _this.timer = setinterval(function () { _this.donext() }, 8000); } }, 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 < 5) { 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", 100) 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:100}) }; this.asort[i].onmouseout(); } else { this.asort[i].onmouseover = this.asort[i].onmouseout = null } } }, 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) } }; window.onload = function () { new zoompic("banner_box"); };