鬼勉強でWEBエンジニアに未経験転職した、かわうそです！
ありがたいことに、入社二年目で、新規事業でECサイトを立ち上げるプロジェクトリーダーなんかも任せていただけるようになりました(詳細知りたい方はTwitterでDMください、大歓迎です)
今日のテーマ:『JavaScript | 画像を切り替えてみよう』
この記事を読めば、ＷＥＢサイトでよく使用される『クリックでの画像切り替え 』 『一定時間ごとで画像が切り替わるスライドショー 』がJavaScriptで実装できるようになるはずです！
今回は、『進む 』 や『戻る』ボタンを実装せず、『画像を切り替える 』 コア部分のコードを書いています。
特にJavaScriptを学び始めた方、脱jQueryを考えている方におすすめです。
ではさっそくいきましょう。
※ちなみにちゃんとJavaScriptを学ぶには、こちらの3万部越えの書籍が良書。書籍選びに迷ってる人は、間違いなし。 レベルは理解できれば中級、全くの初級者にはかなり難しい。入浴中まで読みまくりボロボロのかわうそのバイブル 。
クリックで画像を切り替えてみよう:初級編
まずもっとも簡単なパターンから作成してみましょう。
たった数行の記述でokです。
下の画像をクリックしてみて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p id="test_img1"><img src="http://kawauso-29.com/wp-content/uploads/2020/04/image1.png"></p> <script> let imgList = {image1:"image1.png", image2:"image2.png", image3:"image3.png"}; let num = 1; document.getElementById('test_img1').addEventListener('click', function(){ num++; let imgPath = "http://kawauso-29.com/wp-content/uploads/2020/04/"+imgList['image'+num]; document.querySelector('#test_img1 img').src = imgPath; if (num === 3) { num = 0; } }); </script> |
いかがでしょうか。
コードを少し解説しておきますね。
|
1 |
let imgList = {image1:"image1.png", image2:"image2.png", image3:"image3.png"}; |
これでimgListに表示させる画像を登録しています。オブジェクト形式で格納していますが、もちろん通常の配列でもokです。すべてpng形式で決まっているなら、拡張子も不要でもokです。
|
1 |
let imgList = ["image1.png", "image2.png", "image3.png"]; |
ただし、あとからスライドが追加になった・・・とかなると面倒なので、オブジェクトのほうが便利でしょう。
|
1 2 3 4 5 |
let imgList = ["image0.png", "image1.png", "image2.png", "image3.png"]; //例えばimage0が追加になると、配列の連番がすべてずれてしまうので、拡張性がない let imgList = {image1:"image1.png", image2:"image2.png", image3:"image3.png", image0:"image0.jpg"}; //"image0.jpg"は連番ではなく"image0"で呼び出せるので使いやすい |
あとは、指定の要素をクリックしたときに、numを1ずつ増やすことで、呼び出す画像をimage1, image2と切り替えています。
今回最大がimage3なので、num = 3になった場合、num = 4にならないようにif文でnum = 0と初期化するようにしています。
もしスライドの追加などの拡張性を考えるならば、
|
1 2 3 4 5 6 7 8 9 |
//配列なら if (num === imgList.length ) { num = 0; } //オブジェクトなら if (num === Object.keys(imgList).length ) { num = 0; } |
要素数をプログラムで指定してあげると、さらにスマートです！
これがコアな実装になるので、プレビューボタンやネクストボタンを配置し、スクリプトを少し書き換えれば、モダンなスライドができあがりです！
クリックで画像を切り替えてみよう:中級編
先ほどよりも難易度がグーンと上がっています。
じっくりコードを読み解いてくださいね。
ポイントは、変数はsetImgFuncが関数リテラルであり、その即時関数がリターンした関数を格納している点です！
|
1 |
console.log( setImgFunc ); |
で何が格納されているのか確認してみてください。
↓画像をクリックすると切り替わります↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<p id="test_img2"><span></span><img src="http://kawauso-29.com/wp-content/uploads/2020/04/image1.png"></p> <script> let setImgFunc = (function(){ let imgList = {image1:"image1.png", image2:"image2.png", image3:"image3.png"}; let num = 1; let imgPath; return function() { num++; imgPath = "http://kawauso-29.com/wp-content/uploads/2020/04/"+imgList['image'+num]; testImg = document.querySelector('#test_img2 img').src = imgPath; if (num === 3) { num = 0; } } })(); document.getElementById('test_img2').addEventListener('click', function(){ setImgFunc(); }); </script> |
この書き方は『クロージャ 』 を使っています。
冒頭に紹介した教本にも漏れなく出現、 皆さんが乗り越える壁です。 かわうそもめっちゃ苦しみました。
『num 』が外部から変更されない保守性の高さがメリットです。
もし『クロージャ 』が初耳だ！という方がいれば、まずは『スコープの定義』から勉強してみると、基礎が固まって効率よさげです。
一定時間ごとに画像を切り替えてみよう
最後に、一定間隔で自動で画像を切り替える記述をしてみましょう。
使用するのはこちらの関数。
|
1 |
setInterval(function(){}, ミリ秒); |
さっそくやってみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<p id="test_img3"><span></span><img src="http://kawauso-29.com/wp-content/uploads/2020/04/image1.png"></p> <script> let setImgFunc2 = (function(){ let imgList = {image1:"image1.png", image2:"image2.png", image3:"image3.png"}; let num = 1; let imgPath; return function() { num++; imgPath = "http://kawauso-29.com/wp-content/uploads/2020/04/"+imgList['image'+num]; testImg = document.querySelector('#test_img3 img').src = imgPath; if (num === 3) { num = 0; } } })(); setInterval(function(){ setImgFunc2(); }, 1000) </script> |
変更したのはこの部分のみです！
|
1 2 3 4 5 6 7 8 9 10 |
document.getElementById('test_img2').addEventListener('click', function(){ setImgFunc(); }); ↓↓↓↓↓↓↓↓↓↓↓ setInterval(function(){ setImgFunc2(); }, 1000) |
これで1000ミリ秒 = 1秒 間隔で、setImgFuncが実行されるようになりました！
以上がJavaScriptで画像を切り替える方法でした。