リンクした画像が、スライド(ランダム方向)とフェードインしながら切り替わるスクリプト

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
ul {
  width: 400px;
  height: 200px;
  list-style: none;
  border:1px #888 solid;
  overflow: auto;
  margin: 0;
  padding : 0;
}

li a img {
  border : 0px none;
  width  : 400px;
  height : 200px;
}

</style>

<body>
<ul id="menu">
  <li><a href="#"><img src="./img/0.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/1.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/2.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/3.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/4.gif" alt="*"></a></li>
</ul>
<ul id="menu2">
  <li><a href="#"><img src="./img/0.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/1.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/2.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/3.gif" alt="*"></a></li>
  <li><a href="#"><img src="./img/4.gif" alt="*"></a></li>
</ul>


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

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

AutoChanger.prototype.init = function ( targetId, interval, step, interval2 ) {
  var e = document.getElementById( targetId );
  var cnt, o, s;
  
  if( !e ) return false;
  
  e.style.overflow = 'hidden';
  e.style.position = 'relative';
  
  this.e = e;
  this.interval = interval || 3000;
  this.step = step || 20;
  this.interval2 = interval2 || 50;
  this.timerId = null;
  this.o = 100 / this.step;
  
  for( cnt = 0; o = e.childNodes[ cnt ]; ) {
    if( 1 == o.nodeType && 'LI' === o.nodeName ) {
      s = o.style;
      s.position = 'absolute';
      s.top = '0px';
      s.left = '0px';
      cnt++;
    } else
      e.removeChild( o );
  }
  this.max = cnt;
  this.wait();
};


AutoChanger.prototype.wait = function() {
  timerId = setTimeout( (function ( that ) {
    return function ( ) {
      that.change();
    };
  })( this ), this.interval );
};


AutoChanger.prototype.change = function () {
  var r = Math.floor( Math.random() * 4 );
  
  this.sx = [ 0, this.e.clientWidth, 0, -this.e.clientWidth ][ r ];
  this.sy = [ -this.e.clientHeight, 0, this.e.clientHeight, 0 ][ r ];
  this.vx = -this.sx / this.step;
  this.vy = -this.sy / this.step;
  this.cnt = this.step;
  this.op = 0;

  this.target = this.e.firstChild;
  this.loop();

  this.e.appendChild( this.e.firstChild );
  this.target = this.e.lastChild;
  this.start();
};


AutoChanger.prototype.start = function ( ) {
  this.timerId = setInterval( (function ( that ) {
    return function ( ) {
      that.loop();
    };
  })( this ), this.interval2 );
};


AutoChanger.prototype.stop = function ( ) {
  this.timerId && clearInterval( this.timerId );
  this.timerId && clearTimeout( this.timerId );
  this.timerId = null;
};


AutoChanger.prototype.loop = function ( ) {
  var s = this.target.style;
  s.top = (this.sy | 0) + 'px';
  s.left = (this.sx | 0) + 'px';
  s./*@if(1) filter = 'alpha(opacity='+  this.op +')' @else@*/
    opacity = (this.op / 100) /*@end@*/;

  if( 0 == this.cnt-- ) {
    this.stop();
    this.wait();
    return;
  }
  if( this.cnt ) {
    this.sx += this.vx;
    this.sy += this.vy;
    this.op += this.o;
  } else {
    this.op = 100;
    this.sx = 0;
    this.sy = 0;
  }
};

new AutoChanger( 'menu' );
new AutoChanger( 'menu2' );

</script>
</body>
</html>

個人的な感想。
数年前、これをJavaScriptで実現するのが夢だった。
OKWaveの質問に答えながら、勉強してやっとここまで出来るようになったみたい。
もっと頑張れ〜!俺。


追記
でも、コードを書くことで、腕は上がると思うけど、それはやっぱり良質なコードを書く手本があってのこと。そこはやっぱりTAG indexJavaScriptのBBSです。
それにしても、ここに集まってくる、つわものと思われる方々は、どういう人たちなのだろう?世の中には、こういう人がゴロゴロいるってこと?