画像が縦にスクロールして、マウスが当たると止まり、クリックでリンク先に飛ぶやつ

JavaScript 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">

#ItemList, #ItemList2 {
  list-style: none;
  overflow : auto;
  margin : 0;
  padding : 0;
  height : 300px;
  width : 180px;
  float: left;
}

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

</style>

<body>

<div id="MainMenu">

  <ul id="ItemList">
    <li><a href="#"><img src="./img/0.gif" alt="Image0"></a>
    <li><a href="#"><img src="./img/1.gif" alt="Image1"></a>
    <li><a href="#"><img src="./img/2.gif" alt="Image2"></a>
    <li><a href="#"><img src="./img/3.gif" alt="Image3"></a>
    <li><a href="#"><img src="./img/4.gif" alt="Image4"></a>
    <li><a href="#"><img src="./img/5.gif" alt="Image5"></a>
    <li><a href="#"><img src="./img/6.gif" alt="Image6"></a>
  </ul>

  <ul id="ItemList2">
    <li><a href="#"><img src="./img/0.gif" alt="Image0"></a>
    <li><a href="#"><img src="./img/1.gif" alt="Image1"></a>
    <li><a href="#"><img src="./img/2.gif" alt="Image2"></a>
    <li><a href="#"><img src="./img/3.gif" alt="Image3"></a>
    <li><a href="#"><img src="./img/4.gif" alt="Image4"></a>
    <li><a href="#"><img src="./img/5.gif" alt="Image5"></a>
    <li><a href="#"><img src="./img/6.gif" alt="Image6"></a>
  </ul>

</div>

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

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


ListRoller.prototype.init = function ( e, step, span ) {
  this.p = e;
  this.ts = e.getElementsByTagName( 'LI' );
  this.step = step || 2;
  this.span = span || 50;
  this.tmid = null;
  
  var c = 0, b = 0, max = 0, o, s;
  
  e.style.overflow = 'hidden'
  e.style.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 ( ) {
  var cbFunc = (function ( that ) { return function( ) { that.mover( ); }; })( this );
  return this.tmid = setInterval( cbFunc, this.span );
};


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


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


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

    if( m ) {
      m.start( );
      m = null;
    }
    
    if( p ) {
      m = this.memory[ p.id ];
      m.stop( );
    }
  };
})(
  function ( n, t, v ) {
    return n ? v == n[t] ? n: arguments.callee( n.parentNode, t, v): null;
  });


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

//__________


ListRoller.add( 'ItemList', 2, 100 );
ListRoller.add( 'ItemList2', -2, 100 );
</script>