类似CSDN图片切换效果脚本

 

原来的脚本当只有一张图片时会弹出JavaScript脚本错误，特此将自己修改完的版本贴出。

 

Code

/* ---------------------------------------------------------------------------*\
|  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 < 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='#'><img alt=' " +  alt  + " ' src=' " + src + " '  " ); if (d.length > 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( " <img alt=' " + (d[i].get( " alt " )  ||   "" )  + " ' " );
    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);   
};

转载于:https://www.cnblogs.com/WormCanFly/archive/2009/09/17/1568673.html