複数の画像をスロットマシーンの用に横に回転させる

JavaScript


回転させるアルゴリズムがよくない。
あとで、なおそうっと！

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

<style type="text/css">
  #waku0 { overflow:auto; width:600px; height:90px; border:1px red solid;}
  #waku0 img { border:0px none; width:120px; height:90px; }
</style>

<div id="waku0">
  <img src="./img/0.gif" alt="Image0">
  <img src="./img/1.gif" alt="Image1">
  <img src="./img/2.gif" alt="Image2">
  <img src="./img/3.gif" alt="Image3">
  <img src="./img/4.gif" alt="Image4">
  <img src="./img/5.gif" alt="Image5">
  <img src="./img/6.gif" alt="Image6">
  <img src="./img/7.gif" alt="Image7">
  <img src="./img/8.gif" alt="Image8">
  <img src="./img/9.gif" alt="Image9">
</div>
<script type="text/javascript">

var Math2 = new function ( ) {
  var sinTable = [ ];
  var cosTable = [ ];
  var i, t;

  for( i = 0; i < 720; i++ ) {
    t = i * Math.PI / 180;
    sinTable[ i ] = Math.sin( t );
    cosTable[ i ] = Math.cos( t );
  }

  this.sin = function ( deg ) {
    return sinTable[ (360 + deg % 360) |0 ];
  };
  
  this.cos = function ( deg ) {
    return cosTable[ (360 + deg % 360) |0 ];
  };
};


var RevolvingImage = (function ( sin, cos ) {
  return function ( pid, step, interval, face ) {

    var c, o;
    var k = [];
    var e = document.getElementById( pid );
    var l = e.getElementsByTagName( 'IMG' );
    var r = e.offsetWidth / 2;
    var n = face || l.length;
    var t = 360 / n;

    e.style.overflow = 'hidden';
    e.style.position = 'relative';

    for( c = 0; o = l[ c ]; c++) {
      k[c] = t * c;
      o.style.position = 'absolute';
      o.style.visibility = c < n ? 'visible': 'hidden';
    }
    (function ( ) {
      var c, x0, x1, s;
      for( c = 0; c < n; c++) {
        x0 = r * sin( k[c] ) ;
        x1 = r * sin( k[c] + t)+1;
        s = l[c].style;
        if( x0 < x1 ) {
          s.left   = (r + x0)|0 + 'px';
          s.width  = Math.abs((x1-x0)|0) + 'px';
          s.zIndex = 1 + '';
        } else {
          s.left   = (r + x1)|0 + 'px';
          s.width  = Math.abs((x0-x1)|0) + 'px';
          s.zIndex = 0 + '';
        }
        k[c] += step;
      }
      setTimeout( arguments.callee, interval );
    })();

  };
})( Math2.sin, Math2.cos );

RevolvingImage('waku0', -2, 50)

</script>