JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい。

前提・実現したいこと

CodEditorでJavaScriptの勉強をしている初心者です。
ルーレットが動くのに合わせてバックで画像もパラパラアニメの様に動く様にしたい(添付画像みたいに)のですが方法が全く分かりません...。

ルーレットを作るところまではできているのですがその後どうすれば良いかご教授お願いします！

該当のソースコード

<!DOCTYPE html> <html> <head><title>ルーレット</title> <script type="text/javascript"> spd=100; tID=0; i=0; j=0; k=0; m=0; function start_slot(){ if(i>9){i=0;} if(j>9){j=0;} if(k>9){k=0;} document.f.x.value=i; document.f.y.value=j; document.f.z.value=k; if (m<1){i++;} if (m<2){j++;} if (m<3){k++;} tID=setTimeout("start_slot()",spd); } function stop_slot(){ if(m<3){m++; start_slot();} if(m>2&&(i==j&&j==k)){ alert("大当たり！やったね。"); } clearTimeout(tID); } </script> </head> <body bgcolor="#a1c3f1" text="#ffffff"><center> <table border="3" bgcolor="#b1a8ff"><tr><td> <center> <br><b>ROULETTE</b> <form name="f"> <input name="x" size=1> <input name="y" size=1> <input name="z" size=1> <br><br> <input type="button" value="START" onClick="clearTimeout(tID); m=0; start_slot();"> <input type="button" value="STOP" onClick="stop_slot();"> <br><br> </td></tr></table> </body> </html>

試したこと

現状では変数i,j,kの数値をテキストボックスに表示させているが、添付画像の様にするには変数i,j,kの数値をimg[i].srcのようにして、配列のインデックスとして扱うと説明されたのですがどこに何を入力すれば良いのでしょうか...？

行動規範の内容に同意します

回答1件

極力元のソースを残した形で実装してみました。ご参考までに。

JavaScriptでinput要素のクラス名を変更し、隣接セレクタを使用してinput要素の直後のdivに背景画像を設定しています。

JSFiddle - Code Playground

使用するリソースを事前に読み込み

rel="preload" によるコンテンツの先読み - HTML: HyperText Markup Language | MDN

html
1<title>ルーレット</title>
2
3<link rel="preload" href="https://via.placeholder.com/24x48?text=+0+" as="image" type="image/png">
4<link rel="preload" href="https://via.placeholder.com/24x48?text=1" as="image" type="image/png">
5<link rel="preload" href="https://via.placeholder.com/24x48?text=2" as="image" type="image/png">
6<link rel="preload" href="https://via.placeholder.com/24x48?text=3" as="image" type="image/png">
7<link rel="preload" href="https://via.placeholder.com/24x48?text=4" as="image" type="image/png">
8<link rel="preload" href="https://via.placeholder.com/24x48?text=5" as="image" type="image/png">
9<link rel="preload" href="https://via.placeholder.com/24x48?text=6" as="image" type="image/png">
10<link rel="preload" href="https://via.placeholder.com/24x48?text=7" as="image" type="image/png">
11<link rel="preload" href="https://via.placeholder.com/24x48?text=8" as="image" type="image/png">
12<link rel="preload" href="https://via.placeholder.com/24x48?text=9" as="image" type="image/png">

画像表示用のdivを追加

html
1<input name="x" size=1>
2<div class="image-frame"></div>
3<input name="y" size=1>
4<div class="image-frame"></div>
5<input name="z" size=1>
6<div class="image-frame"></div>

画像表示用のdivのスタイリング、元のinputを非表示。

css
1input[name=x], input[name=y], input[name=z] {
2  display: none;
3}
4
5.image-frame {
6  display: inline-block;
7  background-color: white;
8  background-image: url(https://via.placeholder.com/24x48?text=?);
9  background-repeat: no-repeat;
10  background-size: cover;
11}
12
13input + .image-frame {
14  width: 24px;
15  height: 48px;
16}
17
18input.image-0 + .image-frame {
19  background-image: url(https://via.placeholder.com/24x48?text=+0+);
20}
21
22input.image-1 + .image-frame {
23  background-image: url(https://via.placeholder.com/24x48?text=1);
24}
25
26input.image-2 + .image-frame {
27  background-image: url(https://via.placeholder.com/24x48?text=2);
28}
29
30input.image-3 + .image-frame {
31  background-image: url(https://via.placeholder.com/24x48?text=3);
32}
33
34input.image-4 + .image-frame {
35  background-image: url(https://via.placeholder.com/24x48?text=4);
36}
37
38input.image-5 + .image-frame {
39  background-image: url(https://via.placeholder.com/24x48?text=5);
40}
41
42input.image-6 + .image-frame {
43  background-image: url(https://via.placeholder.com/24x48?text=6);
44}
45
46input.image-7 + .image-frame {
47  background-image: url(https://via.placeholder.com/24x48?text=7);
48}
49
50input.image-8 + .image-frame {
51  background-image: url(https://via.placeholder.com/24x48?text=8);
52}
53
54input.image-9 + .image-frame {
55  background-image: url(https://via.placeholder.com/24x48?text=9);
56}

inputのvalue変更時にクラス名も変更。

javascript
1document.f.x.value = i;
2document.f.x.className = "image-" + i;
3document.f.y.value = j;
4document.f.y.className = "image-" + j;
5document.f.z.value = k;
6document.f.z.className = "image-" + k;