Similar csdn picture toggle effect Script _javascript Skill

Copy Code code as follows:

/*---------------------------------------------------------------------------*\
| Subject:rotate AD
| NameSpace:System.Web.UI.WebControls.MzRotateImage
| Author:meizz
| Created:2006-11-11
| version:2006-12-06
|-----------------------------------
| Msn:huangfr@msn.com qq:112889082 Copyright (c) meizz
| Http://www.meizz.com/jsframework/MIT-style License
| The above copyright notice and this permission notice shall is
| Included in all copies or substantial portions of the Software

| Changer:worm

| Alterdate:2009-09-15
\*---------------------------------------------------------------------------*/
Using ("System.Data.MzDataProvider");
Using ("System.Web.Forms.MzBehavior");

Node{url, Target, Summary, IMG, alt}
function Mzrotateimage ()
{
Mzdataprovider.call (this); This.statechangehandle (1);

This.width = 280;
This.height= 187;
This.timer = null;
This.interval = 10000;
this.duration = 2000;
This.activeindex = 1;
This.currentindex = 0;
This.floatcontrolbar = true;
This.usefilter = system.ie && mzbrowser.version>=5.5;
}
Mzrotateimage.extends (Mzdataprovider, "mzrotateimage");
System.loadcssfile (System.resourcepath + "/mzrotateimage.css", "mzrotateimage_css");

Mzrotateimage.prototype.render=function ()
{
This.datainit (); This.images=new Array ();
var d = this.nodes = This.rootNode.childNodes;

for (var i=0; i<d.length; i++)
{
This.images[i] = new Image ();
THIS.IMAGES[I].SRC = D[i].get ("img");
}

var id=this.id= "Mzrotateimage_" +this.hashcode,s=[];
var width = This.width = parseint (this.width);
var height = This.height = parseint (this.height);

S.push ("<div id=" "+id+" ' style= ' width: "+width+" px; ' class= ' mzrotateimage ' > ");
S.push ("<div id= '" +id+ "_imagebox ' class= ' mzrotateimage_imagebox ' ' style= '" Height: "+ height +" px ' > ");
if (this.usefilter) {if (d.length>0)//filter:revealtrans
{
var alt = D[0].get ("alt"), src = this.images[0].src;
S.push ("<a href= ' # ' >1)
S.push ("Style= ' Filter:revealtrans (duration=" + (this.duration/1000) + ")");
S.push ("id= '" + ID + "_img" style= ' Border:none ' width= "+this.width+" "height=" +this.height+ "/>");
S.push ("<div id= '" + ID + "_div ' style= ' width:" + width + "px; height:25px;overflow:hidden; white-space:nowrap; Text-overflow:ellipsis;cursor:hand ' align= ' center ' > ' +alt+ "</div></a>");

}
}
else {for (i=0; i<d.length; i++)//new mzbehavior.rotate ()
{
S.push ("<div id=" "+id+" _item_ "+i+" ' style= ' width: "+width+" PX; ");
if (i>0) s.push ("Display:none;");
S.push ("Height:" + height + "px"; Overflow:hidden; ' > ");
S.push ("<a href=") + (d[i].get ("url") | | "#")+"'");
S.push ("target= '" + (D[i].get ("target") | | "_self") + "' >");
S.push ("S.push ("src= '" + this.images[i].src + "'/>");
S.push ("<div style= ' width:" + width + "px"; Height:25px;cursor:hand;overflow:hidden; White-space:nowrap; Text-overflow:ellipsis ' align= ' center ' > ' +d[i].get ("alt") + "</div></a></div>");
}
}
S.push ("</div><div style= ' width:" + width + "px;");
S.push (This.floatcontrolbar?) Margin-top: -48px ":") + "'");
S.push ("id= '" +id+ "_controlbar ' class= ' Mzrotateimage_controlbar ' >");
for (i=0;i<d.length;i++) s.push ("<input type= ' button ' style= ' Background-color: #99cccc; Cursor:hand; Border-right: #ffffcc 1px solid; Border-top: #ffffcc 1px solid; Border-left: #ffffcc 1px solid; width:20px; Border-bottom: #ffffcc 1px solid; ' value= ' + (i+1) + "'/>");
S.push ("</div>"); S.push ("</div>"); s = S.join ("");
This.statechangehandle (2); This._onload ();
return s;
};

Mzrotateimage.prototype.statechangehandle=function (N)
{
This.readystate = n| | 0;
This.dispatchevent (New System.event ("onreadystatechange"));
};
Mzrotateimage.prototype._onload=function ()
{
var me=this;
if (Mzelement.check (this.id))
{
This.statechangehandle (4);

if (this.usefilter) this.timer=
settimeout (function () {me.filter ();}, me.interval+me.duration);
Else
{
This._rotate = new Mzbehavior.rotate (me.id + "_imagebox",
{interval:me.interval,duration:me.duration});
This._rotate.addeventlisteners ("onchange", function (e)
{
Me.activeindex = E.target.activeindex;
Me.currentindex = E.target.currentindex;
e= new System.event ("onchange"); E.target=me;
Me.dispatchevent (e);
});
}

var A = Mzelement.check (this.id+ "_controlbar"). getElementsByTagName ("INPUT");
A[this.currentindex].classname = "active";

This.addeventlisteners ("onchange", function (e)
{
for (var i=0; i<a.length; i++) a[i].classname= "";
if (a.length>1)
{
A[e.target.activeindex].classname = "active";
}
Else
{
A[0].classname = "active";
}
});

for (var i=0; i<a.length; i++)
{
var f=new Function ("Instance (' + This.hashcode +"). Focus ("+ i +"));
A[i].onmouseover = f; A[i].onclick = f;
}
}
else settimeout (function () {me._onload ();}, 10);
};

Mzrotateimage.prototype.focus=function (N)
{
Cleartimeout (This.timer);
if (this.usefilter) {this.activeindex=n; This.filter ();}
else if (this._rotate) This._rotate.focus (n);
};
Mzrotateimage.prototype.filter=function ()
{
var me = this;

if (Me.dispatchevent new System.event ("onchange"))
{
var img;
if (Img=mzelement.check (me.id + "_img"))
{
var a = Img.parentnode;
var N;
if (me.nodes.length==1)
N=0
Else
N=me.activeindex;

This.currentindex = N;
This.activeindex = n+1>=me.nodes.length? 0:n+1;
var Dv=mzelement.check (me.id + "_div");
Dv.innertext=me.nodes[n].get ("Alt");

A.href = (me.nodes[n].get ("url") | | "#");
A.target = (Me.nodes[n].get ("target") | | "_self");
IMG.SRC=ME.IMAGES[N].SRC;
Img.alt=me.nodes[n].get ("Alt");
if (Me.nodes.length >1)
{
img.filters.revealtrans.transition=23;
Img.filters.revealTrans.apply ();
Img.filters.revealTrans.play ();
}
}
}
Me.interval = 5000;
This.timer=settimeout (function () {me.filter ();}, me.interval+me.duration);
};