名称：TBanner
功能：在同一位置展示多张图片链接，图片链接之间采用某种效果切换
同一个页面可以显示多个这样的Banner，互不影响
特点：使用简单
类名：TBanner
方法：init(basepath,images,urls) //basepath为图像所在的目录
//images是图像文件名数组
//urls是每个图片所对应链接地址数组,如果少于图片数,则用第一个地址代替
setEffect(filter,fnEffect)//filter是滤镜名及参数,
//fnEffect是名部函数,原型是fnEffect(obj),obj是显示的图片对象
这个函数可在外部改变滤镜参数，以使每次作用效果不同
start(delay)//开始自动播放图片链接，delay是每张图片切换间隔时间,ms为单位
stop() //停止自动切换图片及链接
play() //切换一次图片链接，同时播放效果，一般不用
例子：
var banner_example=new TBanner();//声明一个对像banner_example,然后调用init初始化
banner_example.init("images/",//图象基地址
new Array("r0.gif","r1.gif"), //图象名
new Array("http://www.impx.net")); //对应图片链接
//banner.setEffect("progid:DXImageTransform.Microsoft.Fade(duration=2)");//设置新的效果,没有则调用默认的
banner_example.start(2000);//开始，设置图片切换的间隔时间2秒
演示地址：http://impx.net/scripts/tbanner.htm
TBanner(2) in JScript Posted on Saturday, February 12, 2005 11:28 PM
--
/*重新写了一下这个类，把原来几个函数都移了进去，并且加一个setEffect用来设置滤镜和效果！这样就可以从外部编写函数来增强效果了！并且不用再把对象名传递给类了！保留了对原来的兼容，对外只增加一个setEffect，当然还有play和stop。
演示地址：http://impx.net/scripts/tbanner.htm
*/
/*=============================
Copyright by dragonimp
All rights reserved.
Description:class for TBanner
version0.1 2004.8.26 first thought to make a class for banner
version1.0 2004.11.24 simple function to support a banner
version1.1 2004.12.10 basic effect in class
version1.2 2005.2.6 setEffect to add other filters and effects
Email:dragonimp@impx.net
HomePage:http://www.impx.net
==============================
//Usage:(4 steps to run a banner)
0. First of all, you should include this file in your source.
1. new TBanner to initialize a new TBanner object
2. init the base path of images, names of images, and urls for links. first as default;
3. setEffect to play unique effection. If omitted, it will play with default effection.
4. start with interval time.
//example:
var banner_example=new TBanner();
banner_example.init("/images/rotate/",new Array("r1.gif","r2.gif","r3.gif"),new Array("url1","url2","url3"));
//banner_example.setEffect("progid:DXImageTransform.Microsoft.GradientWipe(duration=1.5,gradientSize=0.75,motion=forward)",null)
//banner_example.setEffect("revealTrans(Duration=2.0,Transition=1)",function(obj){obj.filters[0].Transition = Math.floor(Math.random() * 23);})
banner_example.start(5000);//millisecond
==============================*/
function TBanner()
{
//create a contianer
//====================================
this.container=document.createElement("div");
//document.body.appendChild(this.banner); this cannot work at unstandard env.
var contianerID="TBannerContainer_"+this.container.uniqueID;
document.write("<div id='"+contianerID+"'></div>");
delete this.container;
this.container=eval(contianerID);
this.image=window.document.createElement("img");
this.link=window.document.createElement("a");
this.container.appendChild(this.link);
this.link.appendChild(this.image);
//====================================
this.id="banner_"+this.container.uniqueID;
eval(this.id+"=this");//set the REAL bannerid as this object
this.container.style.filter="revealTrans(Duration=2.0,Transition=1)";
this.container.margin=0;
this.container.padding=0;
this.image.border=0;
this.image.style.filter=this.container.style.filter;
this.image.alt=this.id;
this.link.target="_blank";
this.index=0;
this.delaytime=5000;
this.timer=null;
//public:
this.init = function(basepath,images,urls)
{
this.imagebasepath=basepath;
this.images=images;
this.urls=urls;
this.PreloadImages(images);
this.switchBanner();//show first banner
}
this.start = function(delaytime)
{
this.delaytime=(delaytime==null)?this.delaytime:delaytime;
this.timer=setInterval(this.id+".play()",this.delaytime);
}
this.stop = function()
{
window.clearTimeout(this.timer);
this.timer=null;
}
this.setEffect = function(filter,fnSwitch)
{
this.container.style.filter=filter;
this.image.style.filter=filter;
this.switchEffect=(fnSwitch==null)?function(){}:fnSwitch;
}
//switch to next banner and play effection
this.play = function()
{
obj=this.image;//this.container doesn't work, why???
//obj.style.visibility="hidden";
obj.filters[0].Apply();
this.switchBanner();
obj.style.visibility="visible";
obj.filters[0].Play();
this.switchEffect(obj);
};
//private:
//default Effect Action
this.switchEffect = function(obj)
{
obj.filters[0].Transition = Math.floor(Math.random() * 23);
}
//show next banner
this.switchBanner = function()
{
var banner=this;
if (banner.index<banner.urls.length)//change link
banner.link.href=banner.urls[banner.index];
else
{
if (banner.urls[0]!=null)
{
banner.link.href=banner.urls[0];
banner.link.title=banner.link.href;
banner.link.disabled=false;
banner.link.target="_self";
}
else
{
banner.link.href="#";
banner.link.target="_self";
banner.link.disabled=true;
}
}
banner.image.src=banner.imagebasepath+banner.images[banner.index];
banner.index++;
if(banner.index >= banner.images.length)banner.index=0;
}
//Load images before play
this.PreloadImages = function(images)
{
var preloadedimages=new Array()
for (i=0;i<images.length;i++)
{
preloadedimages[i]=new Image()
preloadedimages[i].src=images[i];
}
delete preloadedimages;
}
}
