画像がフェード&移動しながら、切り替わり、なおかつ、そのリンク先が左でスクロールし、なおかつ、その画像がロールオーバーするやつ。っうかあタイトル長っ！

JavaScript

タイトルも長ければコードも長い
でも、３つの集大成。
単品だと、PCへの負荷も少ないのだけれど、３つだと、Firefoxで１００％になるんですけど？これを高速化するにはどうするの？
昨日アップした奴のリニューアル版です。これでも高速化したつもりなんだけどなぁ〜

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
#MainMenu {
  width :680px;
  height: 300px;
  overflow:auto;
}

#MainMenu ul {
  float :left;
  list-style: none;
  overflow : auto;
  margin : 0;
  padding : 0;
  height : 300px;
}

#MainView {
  width  : 500px;
}

#MainView li {
  margin : 0;
  padding : 0;
  height : 300px;
}

#MainView li img {
  width:500px;
  height:300px;
  border : 0px none;
}

#ItemList {
  list-style: none;
  width : 180px;
}

#ItemList li {
  width : 180px;
  height: 50px;
}
#ItemList li a {
  width : 180px;
  height: 50px;
  border :0px none;
}

#ItemList li a img {
  width : 180px;
  height: 50px;
  border: 0px none;
}

</style>

<body>
<div id="MainMenu">

  <ul id="MainView">
    <li><img src="./img/0.gif" alt="xxx0">
    <li><img src="./img/1.gif" alt="xxx1">
    <li><img src="./img/2.gif" alt="xxx2">
    <li><img src="./img/3.gif" alt="xxx3">
    <li><img src="./img/4.gif" alt="xxx4">
    <li><img src="./img/5.gif" alt="xxx5">
    <li><img src="./img/6.gif" alt="xxx6">
  </ul>

  <ul id="ItemList">
    <li>
      <a href="#">
        <img src="./img/0.gif" alt="yyy0" class="hv">
      </a>

    <li>
      <a href="#">
        <img src="./img/1.gif" alt="yyy1" class="hv">
      </a>

    <li>
      <a href="#">
        <img src="./img/2.gif" alt="yyy2" class="hv">
      </a>

    <li>
      <a href="#">
        <img src="./img/3.gif" alt="yyy3" class="hv">
      </a>

    <li>
      <a href="#">
        <img src="./img/4.gif" alt="yyy4" class="hv">
      </a>

    <li>
      <a href="#">
        <img src="./img/5.gif" alt="yyy5" class="a hv bc">
      </a>

    <li>
      <a href="#">
        <img src="./img/6.gif" alt="yyy6" class="hv">
      </a>
  </ul>
</div>

<script type="text/javascript">
//@cc_on

var AutoChanger = function ( ) {
  this.init.apply( this, arguments );
  this.start( );
};

AutoChanger.prototype.init = (function ( ) {
  return function ( id, wait, step, span ) {
    this.p = document.getElementById ( id ); if( !this.p ) return;
    this.tw = this.p.clientWidth;
    this.th = this.p.clientHeight;
    this.ts = [ ];
    this.tmid = null;
    this.wait = wait || 7000;
    this.step = step || 1.5;
    this.span = span || 70; 
    this.no = 0;
    
    var o, s = this.p.style, c = this.p.firstChild;
  
    s.overflow = 'hidden', s.position = 'relative'; 

    while( o = c ) {
      c = o.nextSibling;
      if( 'LI' == o.nodeName ) {
        o.style.position = 'absolute';
        this.ts.push( o );
      } else this.p.removeChild( o );
    }
  };
})();


AutoChanger.prototype.change = (function ( ) {
  return function ( n, r ) {
    if( this.no == n ) return;

    this.no = ( 'number' == typeof n ? n: this.no + 1 ) % this.ts.length;
    r  = Math.floor( 'number' == typeof r ? r : Math.random() * 4 % 4);

    var tmid = setInterval( (function ( that, t, z ) {
      var fade = 1;
      var step = that.step;
      var s = t.style;

      s.top = z[1] + 'px';
      s.left = z[0] + 'px';
      that.p.appendChild( t )

      return function ( ) {
        if( 0.01 < ( fade /= step ) ) {
          s.top = Math.floor( z[1] * fade ) + 'px';
          s.left = Math.floor( z[0] * fade ) + 'px';
          s./*@if( @_jscript )
            filter = 'Alpha(opacity=' + (100 - fade * 100) + ')' @else@*/
            opacity = 1 - fade + '' /*@end@*/;
        } else {
          clearInterval( tmid );
          that.start( );
        }
      };
    })( this,
        this.ts[ this.no = this.no % this.ts.length ], 
        [[ 0, -this.th], [ this.tw, 0 ], [ 0, this.th ], [ -this.tw, 0]][ r ]
      ), this.span );
  
  };
})();


AutoChanger.prototype.start = (function ( ) {
  return function ( ) {
    this.stop( );
    return this.tmid = setTimeout( (function ( that ) {
      return function ( ) { that.change( ); };
    })( this ), this.wait )
  };
})();


AutoChanger.prototype.stop = (function ( ) {
  return function ( ) {
    return clearInterval( this.tmid );
  };
})();

//__________

var ListRoller = function ( ) {
  this.init.apply( this, arguments );
  this.start( );
};


ListRoller.prototype.init = (function ( ) {
  return function ( id, step, span ) {
    this.p = document.getElementById( id ); if( !this.p ) return;
    this.ts = this.p.getElementsByTagName( 'LI' );
    this.step = step || 2;
    this.span = span || 50;
    this.tmid = null;
    
    var s = this.p.style;
    var c = 0, b = 0, max = 0, o;
    
    s.overflow = 'hidden', s.position = 'relative'; 
    
    while( o = this.ts[ c++ ] ) {
      s = o.style;
      s.position = 'absolute';
      s.left = '0px';
      s.top = ( max += b ) + 'px';
      b = o.offsetHeight;
    }
    this.max = max;
  };
})();



ListRoller.prototype.start = (function ( ) {
  return function ( ) {
    return this.tmid = setInterval( (function ( that ) {
      return function ( ) {
        var i = 0, o, h, t;
        if( that.step > 0 ) {
          while( o = that.ts[ i++ ] ) {
            t = ( h = o.offsetTop + that.step ) - that.max;
            if( 0 < t ) h = -o.offsetHeight + t;
            o.style.top = h + 'px';
          }
        } else {
          while( o = that.ts[ i++ ] ) {
            t = ( h = o.offsetTop + that.step ) + o.offsetHeight;
            if( 0 > t ) h = that.max + t;
            o.style.top = h + 'px';
          }
        }
      };
    })( this ), this.span );
  };
})();


ListRoller.prototype.stop = (function ( ) {
  return function ( ) {
    return clearTimeout( this.tmid );
  };
})();


ListRoller.memory = [ ];


ListRoller.Listener = (function ( ) {
  var m;
  return function ( evt ) {
    var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
    var p = P( e, 'nodeName', 'UL' ) || { };

    if( m && m.obj ) m.obj.start( );
    
    if( m = ListRoller.memory[ p.id ] ) {
      m.obj && m.obj.stop( );
      m.cbFunc && m.cbFunc( e, C( P( e, 'nodeName', 'LI' ) ) );
    }

    function P(n,t,v){return n?v==n[t]?n:arguments.callee(n.parentNode,t,v):null}
    function C(n,c,t){
      if((c=-1)&&n&&(t=n.nodeName))do c+=(t==n.nodeName);while(n=n.previousSibling)
      return c;
    }
  };
})();


ListRoller.add = function ( id, step, interval, cbFunc ) {
  var e = document.getElementById( id );
  if( ! this.memory[0] ) {
    document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
      'mouseover', ListRoller.Listener, false );
  }
  if( e && 'UL' == e.tagName && !ListRoller.memory[ id ] )
    this.memory[ id ] = { cbFunc: cbFunc, obj: new this( id, step, interval ) };
};

//__________

var ImageHover = function ( cssName, addStr ) {

  var reg_chk = new RegExp( '(^|\\s)' + cssName + '($|\\s)' );
  var reg_rep = new RegExp( '^(.+)(\\..+)$' );
  var reg_pbk = new RegExp( '^(.+)' + addStr + '(\\..+)$');
  var m;

  return function ( evt ) {
    var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;

    if( m && m != e )
      m.src = m.src.replace( reg_pbk, '$1$2' );

    if( 'IMG' == e.nodeName && reg_chk.test( e.className ) ) {
      e.src = e.src.replace( reg_rep, '$1' + addStr + '$2' );
      m = e;
    }
  };
};

//__________

document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
  'mouseover', ImageHover( 'hv', '_rev' ) , false );

ListRoller.add( 'ItemList', -1, 100, (function ( that ) {
  return function ( e, n ) { that.change( n, 1 ); }; 
})(new AutoChanger( 'MainView', 3000, 1.5, 70 ) ) );

</script>

</body>
</html>