同様の CSDN 画像切り替え効果 script_javascript スキル

コードをコピー コードは次のとおりです:

/*---------------------------------------------------------------------------*\
| 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 be
| 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{
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("

");
s.push("

");
if(this.useFilter) { if(d.length>0) //filter: revealTrans
{
var alt = d[0].get("alt"), src = this.images[0].src;
s.push("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("

"+alt+"

");

}
}
else { for(i=0; i{
s.push("

");
s.push("s.push(" target='"+ (d[i].get("target") || "_self") +"'>");
s.push("s.push(" src='"+ this.images[i].src +"'/>");
s.push("

"+d[i].get("alt")+"

");
}
}
s.push("

s.push(" id='"+id+"_ControlBar' class='MzRotateImage_ControlBar'>");
for(i=0;i");
s.push("

"); s.push("

"); 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; iif(A.length>1)
{
A[e.target.activeIndex].className = "active";
}
else
{
A[0].className = "active";
}
});

for(var i=0; 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);
};