#1です。
#2に回答がでているので、#3様にならってオブジェクト的になもの(？)を練習で作ってみました。（prototype使うの慣れてないので、要領悪いかも…）
<div class="dram">となっている要素の中に、ドラムが作成されます。
とりあえず、imgではなくtextで代用していますが、ドラムを生成する時にTextNodeの代わりにimg要素を入れるようにすれば、表示をそのまま画像に替えられるはず。
stopボタンを押してから空回りして止まるようにしています。その変化をintervalとstepを変えることで行なっているので、数値を変えると止まるまでの時間や回り方も変わります。
最後に止まるときに、どちら側で止まるのか逆転させたりして、ややアナログ的な雰囲気にしたつもり。
ご愛嬌ですが、ご参考まで…
<html>
<head>
<title>test</title>
<style type="text/css">
.dram {
margin:0; padding:0;
text-align:center;
float:left;
width:50px;
}
.dram div {
height:48px; _height:52px;
overflow:hidden;
background-color:#fff;
border:4px ridge #fff;
margin-bottom:8px;
}
.dram div span {
font-size:30px;
font-weight:bold;
line-height:46px;
position:relative;
}
.clr { clear:both; }
</style>
</head>
<body>
<div class="dram">dram1</div>
<div class="dram">dram2</div>
<div class="dram">dram3</div>
<div class="dram">dram4</div>
<div class="dram">dram5</div>
<div class="dram">dram6</div>
<div class="dram">dram7</div>
<hr class="clr">
<input type="button" value="start" id="starter">
<script type="text/javascript">
window.onload = function(){ slot.init(); };
// *** スロット全体 ***
var slot = {
item : [],
//スロットの初期設定
init : function() {
var param = {
height : 46, // 1コマの高さ(px)
interval : [30, 30, 40, 36, 40, 30, 50, 80], // 速度(msec)
step : [10, 8, 6, 4, 2, 1, 1, 1], // 1回の送り量(px)
point : [10, 30, 70, 100, 140, 160, 180, 'end'] //速度切替えポイント
};
var letter = '9876543210'; // 表示用文字列（仮設定)
var i = 0, e, tmp;
var m = letter.split(''), n = m.length;
var div = document.getElementsByTagName('DIV');
while (e = div[i++]) if (e.className == 'dram') {
tmp = new dram(param);
tmp.create(e, m, n);
this.item[this.item.length] = tmp;
}
document.getElementById('starter').onclick =
function() { slot.starter(); };
},
//スタートボタンを押したとき
starter : function() {
var i = 0, e;
while (e = this.item[i++]) e.start();
},
//ドラムが止まったときの結果判定
result : function() {
var i = 0, e, f = true, result = '';
while (e = this.item[i++]) {
if (e.status.tid) { f = false; break; }
result += (e.status.number - e.status.value - 1) + ' ';
}
if (f) alert(result);
}
}
// *** ドラムの定義 ***
var dram = function (p) {
//this.type = 'dram';
this.status = {tid:null, counter:0, pointer:0, value:0};
this.param = p;
}
//ドラムを停止
dram.prototype.stop = function() {
var s = this.status;
s.counter = 1;
s.element.parentNode.style.backgroundColor = '';
}
//ドラムをスタート
dram.prototype.start = function() {
var p = this.param, s = this.status;
if (s.tid) clearTimeout(s.tid);
s.interval = p.interval[0];
s.step = p.step[0];
s.counter = 0, s.pointer = 0;
this.roll();
s.element.parentNode.style.backgroundColor = '#ffd';
}
//ドラムを回転させる（速度調整含む）
dram.prototype.roll = function() {
var f = true, p = this.param, s = this.status;
var tmp = s.top + s.step;
tmp -= (tmp<0)?0:s.max;
s.element.style.top = tmp + 'px';
s.top = tmp, s.value = Math.round(-tmp / p.height) % s.number;
if (s.counter) {
tmp = p.point[s.pointer];
if (tmp == 'end') {
tmp = s.top / p.height;
s.step = tmp - Math.round(tmp)>0?-1:1;
f = !!(s.top % p.height);
} else {
if (++s.counter > tmp) {
s.interval = p.interval[++s.pointer];
s.step = p.step[s.pointer];
}
}
}
if (f) {
s.tid = setTimeout((function(obj) {
return function(){obj.roll();}
})(this), s.interval);
} else {
s.tid = null;
slot.result();
}
}
//ドラムを作成する
dram.prototype.create = function(e, m, n) {
var d, sp, j, h = this.param.height, s = this.status;
sp = document.createElement('span');
d = document.createElement('div');
while (e.firstChild) e.removeChild(e.firstChild);
for (j=0; j<m.length; j++) {
sp.appendChild(document.createTextNode(m[j]));
sp.appendChild(document.createElement('br'));
}
sp.appendChild(document.createTextNode(m[0]));
d.appendChild(sp);
e.appendChild(d);
s.element = sp;
s.number = n;
s.max = h * n;
j = -Math.floor(Math.random() * n) * h;
s.top = j, sp.style.top = j + 'px';
sp = document.createElement('input');
sp.type = 'button';
sp.value = 'stop';
e.appendChild(sp);
sp.onclick = (function(obj) {
return function(){obj.stop();}
})(this);
}
</script>
</body>
</html>
お礼
babu_babooさん 丁寧なプログラムありがとうございます。 また わからないことがあったら教えてください。