画像が左から右へ、フェードしながら切り替わる

JavaScript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<style type="text/css">
</style>
<body>
<div>
<img src="./img/photo0.jpg" width="640" height="200" id="a"><br>
<img src="./img/photo1.jpg" width="640" height="200" id="b">
</div>
<script type="text/javascript">
//@cc_on
setOpacity = function (op) {
  this./*@if (@_jscript) filter = 'alpha(opacity='+ op + ')' @else@*/ opacity = op / 100 /*@end@*/;
};

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

Changer.prototype.init = function (eId, x_span, speed, step) {
  var tgt = document.getElementById(eId);
  this.tgt = tgt;
  this.speed = speed;
  this.step = step;
  this.makeScreen(tgt, x_span);
};

Changer.prototype.makeScreen = function (e, n) {
  var d = document.createElement('div');
  var s = d.style;
  var x = 0;
  var y = 0;
  var g = e;
  var c = 0;
  var img;
  var duv;
  var p = e.offsetWidth / n;
  this.n = n;
  
  do x += g.offsetLeft, y += g.offsetTop; while (g = g.offsetParent)
  s.top = y + 'px';
  s.left = x + 'px';
  s.position = 'absolute';
  document.body.appendChild(d);

  this.screen = new Array(n);
  this.opacity = new Array(n);
  for (c = 0; c<n; c++) {
    img = document.createElement('img');
    img.src = e.src;
    s = img.style;
    s.position = 'absolute';
    setOpacity.call(s, 0);
    s.top = '0px';
    s.left = '0px';
    s.width = e.offsetWidth + 'px';
    s.height = e.offsetHeight + 'px';
    s.clip = 'rect(0px, '+(p*(c+1)/*@if(1)-1@end@*/)+'px, 200px, ' + (p*c) + 'px)';
    d.appendChild(img);
    this.screen[c] = img;
    this.opacity[c] = 0;
  }
};
Changer.prototype.changeImage = function (src) {
  var c = 0;
  var o;
  while (o = this.screen[c]) {
    setOpacity.call(o.style, 0);
    o.src = src;
    this.opacity[c] = 0;
    c++;
  }
  this.buf = src;
  this.f = false;
  this.cnt0 = 0;
  this.cnt1 = 1;
  this.loop();
};

Changer.prototype.loop = function () {
  var i, op;
  for (i = this.cnt0; i < this.cnt1; i++) {
    op = this.opacity[i];
    setOpacity.call(this.screen[i].style, op);
    this.opacity[i] = (op += this.step);
    if (op>100) { this.cnt0++; continue; }
  }
  if(this.n>this.cnt1) this.cnt1++;
  if (this.opacity[this.n-1]>100) this.f = true;
  if (! this.f) { setTimeout((function(cb_){ return function() {cb_.loop();};})(this), this.speed); return; }
  this.tgt.src = this.buf;
  var c = 0;
  var o;
  while (o = this.screen[c]) {
    setOpacity.call(o.style, 0);
    this.opacity[c] = 0;
    c++;
  }
  
};

var p = new Changer('a', 50, 10, 2);
p.changeImage('./img/photo1.jpg');

</script>