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("dl")[0]; this.ali = this.wrap.getelementsbytagname("dd"); this.prev = this.wrap.getelementsbytagname("pre")[0]; this.next = this.wrap.getelementsbytagname("pre")[1]; this.timer = null; this.asort = []; this.icenter =1; this._doprev = function () {return _this.doprev.apply(_this)}; this._donext = function () {return _this.donext.apply(_this)}; this.options = [ {width:373,height:255,top:88,left:0,zindex:1}, {width:600,height:410,top:0,left:303,zindex:4}, {width:400,height:273,top:70,left:800,zindex:3}, {width:454,height:310,top:58,left:142,zindex:2}, ]; 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() }, 300000000); this.wrap.onmouseover = function () { clearinterval(_this.timer) }; this.wrap.onmouseout = function () { _this.timer = setinterval(function () { _this.donext() }, 30000000000); }*/ }, 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 () { //传图片标题值 var text=$("#jswbox dl dd").eq(_this.icenter).attr("dir") $("#jswbox .divtext").html(text) //控制只有图片到中间才有链接 $("#jswbox dl dd").each(function(index, element) { $("#jswbox dl dd").eq(_this.icenter).find("a").css("display","block") $('#jswbox dl dd').eq(_this.icenter).siblings().find("a").css("display","none") }); _this.domove(_this.asort[_this.icenter].getelementsbytagname("img")[0], {opacity:100}, function () { //此处为对中间图片的一个hover效果,标题的出现与隐藏,此处的标题在li中 _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.domove(this.asort[i], this.options[i], function () { _this.domove(_this.asort[_this.icenter].getelementsbytagname("img")[0], {opacity:100}, function () { //传图片标题值 var text=$("#jswbox dl dd").eq(_this.icenter).find("img").attr("dir") $("#jswbox .divtext").html(text) //控制只有图片到中间才有链接 $("#jswbox ul li").each(function(index, element) { $("#jswbox ul li").eq(_this.icenter).find("a").css("display","block") $('#jswbox ul li').eq(_this.icenter).siblings().find("a").css("display","none") }); _this.domove(_this.asort[_this.icenter].getelementsbytagname("img")[0], {opacity:100}, function () { //此处为对中间图片的一个hover效果,标题的出现与隐藏,此处的标题在li中 _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}) } }) }) }); 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", 1) 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:90}) }; 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) / 3; 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) } },100) } }; //调用压层图片切换方法 $(function(){ new zoompic("jswbox"); })