はじめに
未来電子テクノロジーでインターンをしている坂口です。
プログラミングを始めて2週間目。今週は初めてHTMLとCSSを自分で書いて、Github上でホームページを作成しました。
その際に、タップすると画像がどんどん切り替わってループするJavaScriptを実装したのですが、そのコードが、JavaScriptの仕組みを一切分かっていない初心者にも使いやすいものだったので、シェアします。
コードがこちら
<img id="mypic" onclick="slideshow()" src="img1" width="" height="">
<script>
var pics_src = new Array ("img1", "img2", "img3");
var num = 0;
function slideshow(){
if (num == 2) {
num = 0;
}
else {
num ++;
}
document.getElementById("mypic").src=pics_src[num];
}
</script>
このうち自分で入力しなければいけない部分は、img1~3と、width、height、そしてnum == ?（上のコードでは2） の部分です。
まず、img1~3にはその通りに、1番目に表示したい画像、2番目に表示したい画像の順番で、その画像のURLやファイル名を入力します。（※img1を入力するのは二ヵ所あります）
このコードでは3枚しか画像を表示しないことになっていますが、4枚目、5枚目の画像を表示したければ、その都度同様に""に入れて画像を追加していってください。
一行目のwidthとheightでは、表示させる画像の幅と高さを設定します。
1枚ごとに幅と高さを設定することはできないので、同じ縦横比の画像を使うことが好ましいですね。
（もっとJavaScriptに詳しければ、1枚ごとに幅とかを変えるようなコードを書くこともできるのでしょうか…初心者坂口にとっては未知の世界です）
そして、最後に大事な部分なのですが、if (num == ?)の?の部分を入力します。
上のコードでは、全部で3枚の画像が切り替わるようになっているので、3-1で2となっています。
つまり、表示させる画像の総数-1の値を?に入力してください。
全部で4枚なら?には3を、全部で5枚なら?には4を、といった具合です。
ちなみに、なぜ総数-1になるのかと言うと、このコードには一枚目の画像を0と設定するようになっていて、0,1,2と進んでいって2になったら0に戻る！という指示がされるようになっているらしいのです。
だから、この?には0から数えていって、どの数字になったら0に戻るか、を入力しなければならない、ということです。
（1から数えたら、?には画像の枚数をそのまま入力すればいいだけなので、よっぽど分かりやすいのに…と初心者的には考えてしまいますが）
まとめ
今回は、JavaScriptにまったく触れたことがない人を想定して、ものすごくかみ砕いて説明してみました。
（なぜなら、自分が初心者の身で、ネット上のみなさんのコードの解説を理解するのにとてつもなく苦労したので）
同じようなプログラミング初心者の方に少しでも参考になれば幸いです。
また、私自身プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。よろしくお願いいたします。