質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

受付中

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

chanco
chanco

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

1回答

0評価

1クリップ

2087閲覧

投稿2020/08/19 07:05

前提・実現したいこと

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のようにして、配列のインデックスとして扱うと説明されたのですがどこに何を入力すれば良いのでしょうか...?

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。