随机切换图片和图片渐隐渐现效果【原创】

　　无聊，发点东西上来玩，图片的渐隐渐现效果看左上角的图片啦。

/**
 * 图片效果类
 * @author zxub 2006-06-10
 */

var ImageEffect=new function()
{    
}

/**
 * 随机切换
 */
ImageEffect.switchImg=function(_container,_width,_height,_delay)
{    
    this.imgUrl=new Array(); //图片地址    
    this.linkUrl=new Array(); //链接地址    
    this.caption=new Array(); //图片说明
    
    this.delayTime=(_delay==undefined)?5000:_delay; //每张图切换时间 (单位毫秒)
    
    this.imgWidth=(_width==undefined)?240:_width; //图片宽
    this.imgHeight=(_height==undefined)?180:_height; //图片高
    
    this.showIndex=-1; //图片显示索引
    
    this.container=(typeof(_container)=="string")?document.getElementById(_container):_container;    
    
    this.imgObj=null;
    
    var _point=this;
    
    this.goUrl=function()
    {
        var _url=(this.linkUrl[this.showIndex]==undefined)?this.imgUrl[this.showIndex]:this.linkUrl[this.showIndex];
        window.open(_url,"_blank");
    }
    
    this.setImgObj=function()
    {
        this.imgObj=document.createElement("img");
        this.imgObj.style.cssText="cursor:pointer;filter: revealTrans(duration=1,transition=120); border:1px solid black";
        this.imgObj.setAttribute("width",this.imgWidth);
        this.imgObj.setAttribute("height",this.imgHeight);
        this.imgObj.setAttribute("border",0);
        this.imgObj.setAttribute("id","img_"+_container);        
        this.imgObj.onclick=function()
        {
            _point.goUrl();
        }
        this.container.appendChild(this.imgObj);
    }
    this.setImgObj();
    
    this.show=function()
    {
        _point.showIndex=(_point.showIndex+1)%_point.imgUrl.length;
        with (_point.imgObj)
        {
            if (_point.imgObj.filters)
            {
                filters[0].Transition=37;
                filters[0].apply();
                src=_point.imgUrl[_point.showIndex];
                filters[0].play();
                title=(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
            }
            else
            {
                src=_point.imgUrl[_point.showIndex];
                title=(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
            }            
        }
        window.setTimeout(_point.show, _point.delayTime);
    }
}

/**
 * 渐隐渐现
 */
ImageEffect.slideShow=function(_container,_width,_height,_delay)
{    
    this.imgUrl=new Array(); //图片地址    
    this.linkUrl=new Array(); //链接地址    
    this.caption=new Array(); //图片说明
    
    this.delayTime=(_delay==undefined)?5000:_delay; //每张图切换时间 (单位毫秒)
    
    this.imgWidth=(_width==undefined)?240:_width; //图片宽
    this.imgHeight=(_height==undefined)?180:_height; //图片高
    
    this.showIndex=-1; //图片显示索引
    
    this.container=(typeof(_container)=="string")?document.getElementById(_container):_container;
    
    this.curpos=10;
    this.degree=10;
    this.canvas="canvas0";        
        
    var _point=this;
    
    this.timerId;
    
    this.setShowArea=function()
    {
        var _div=document.createElement("div");
        _div.style.cssText="position:relative;width:"+this.imgWidth+";height:"+this.imgHeight+";overflow:hidden";
        this.container.appendChild(_div);
        var canvas=document.createElement("div");canvas.id="canvas0";
        canvas.style.cssText="cursor:pointer;position:absolute;width:"+this.imgWidth+";height:"+this.imgHeight+";top:1;left:2;filter:alpha(opacity=10);-moz-opacity:10";
        _div.appendChild(canvas);
        canvas=document.createElement("div");
        canvas.id="canvas1";
        canvas.style.cssText="cursor:pointer;position:absolute;width:"+this.imgWidth+";height:"+this.imgHeight+";top:1;left:2;filter:alpha(opacity=10);-moz-opacity:10";
        _div.appendChild(canvas);
    }
    this.setShowArea();
    
    this.fadePic=function()
    {      
        if (_point.curpos<100)
        {  
            var _tempObj=document.getElementById(_point.canvas);
            _point.curpos+=10;
            if (_tempObj.filters)
            {
                _tempObj.filters.alpha.opacity=_point.curpos;
            }
            else if (_tempObj.style.MozOpacity)
            {
                _tempObj.style.MozOpacity=_point.curpos/101;
            }
        }
        else
        {
            _point.canvas=(_point.canvas=="canvas0")? "canvas1" : "canvas0";
            var _tempObj=document.getElementById(_point.canvas);
            window.clearInterval(_point.timerId);
            _point.insertImg(_tempObj);            
            _tempObj.style.visibility="hidden";
            window.setTimeout(_point.rotateImg,_point.delayTime);
        }
    }
    
    this.insertImg=function(_container)
    {
        this.showIndex=(this.showIndex+1)%this.imgUrl.length;
        var _htmlString='<img src="'+this.imgUrl[this.showIndex]+'" border="0" width="'+this.imgWidth+'" height="'+this.imgHeight+'">';
        _container.innerHTML=_htmlString;
    }
    
    this.rotateImg=function()
    {
        _point.resetImg(_point.canvas);
        var _obj=document.getElementById(_point.canvas);
        _obj.style.zIndex++;
        _obj.style.visibility="visible";
        _obj.onclick=function()
        {
            _point.goUrl();
        }
        _obj.title=(_point.caption[_point.showIndex]==undefined)?_point.imgUrl[_point.showIndex]:_point.caption[_point.showIndex];
        _point.timerId=window.setInterval(_point.fadePic,50);        
    }
    
    this.goUrl=function()
    {
        var _index=(this.showIndex==0)?(this.imgUrl.length-1):(this.showIndex-1);
        var _url=(this.linkUrl[_index]==undefined)?this.imgUrl[_index]:this.linkUrl[_index];
        window.open(_url,"_blank");
    }
    
    this.resetImg=function(_canvas)
    {
        this.curpos=10;
        _canvas=document.getElementById(_canvas);
        if (_canvas.filters)
        {
            _canvas.filters.alpha.opacity=this.curpos;
        }
        else if (_canvas.style.MozOpacity)
        {
            _canvas.style.MozOpacity=this.curpos/101;
        }
    }
    
    this.show=function()
    {
        this.insertImg(document.getElementById(this.canvas));
        this.rotateImg();
    }
}

　　再放个例子：

var sImg1=new ImageEffect.switchImg("tt1",506,234,3000);
var sImg2=new ImageEffect.slideShow("tt2",506,234,3000);
for (var i=0; i<7; i++)
{
    sImg1.imgUrl[i]="testImg/"+(i+1)+".jpg";
    sImg2.imgUrl[i]="testImg/"+(i+1)+".jpg";    
}
sImg1.show();
sImg2.show();

　　在网上找了好久，没好用的，就自己封了个，大家凑或用了。