お電話でのお問い合わせ
電話をかける
電話をかける メニューボタン
学習コンセプトカリキュラム・料金教室紹介無料体験授業

フタバゼミ
ゼミノート

【JavaScript】4コマ漫画をコマ送り

引き続き、JavaScriptの配列変数を使ってプログラミングしていきましょう。

今回は、クリックするたびにコマ送りができる4コマ漫画を作ります。

まずは4コマのもとになる、画像を用意。


koma01.jpg


koma02.jpg


koma03.jpg


koma04.jpg

続いて、scriptを書いていきます。

変数名animationとして、配列変数を作ります。

配列番号を指定して、4コマの画像を入れましょう。

続いて、カウントアップするための変数iを作ります。

表示させる画像を、配列の0~3で切り替えるコードを書きましょう。

ここでは、定義する関数名をchangeにします。

もし変数iが3なら、変数iを0に戻す。でなければ、変数「i」を1ずつ増やす。カウントアップ。

そして、表示させる画像を、配列の0~3で切り替えます。

scriptの記述は以上。

続いてbodyの中に、画像表示させる部分を書いていきましょう。

centerタグで中央にそろえて、4コマ画像を表示させるエリアはidで指定します。

onclickを入れてクリックするたびにchange()を実行。

コマ送りする4コマ漫画の出来上がりです。