Banner展示类TBanner(2) in JScript

名称：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;
 }
}