JavaScript | 画像を切り替えてみよう

鬼勉強でWEBエンジニアに未経験転職した、かわうそ( @kawauso_29)です!

ありがたいことに、入社二年目で、新規事業でECサイトを立ち上げるプロジェクトリーダーなんかも任せていただけるようになりました(詳細知りたい方はTwitterでDMください、大歓迎です)

今日のテーマ:『JavaScript | 画像を切り替えてみよう

この記事を読めば、WEBサイトでよく使用される『クリックでの画像切り替え 』 『一定時間ごとで画像が切り替わるスライドショー 』がJavaScriptで実装できるようになるはずです!

今回は、『進む 』 や『戻る』ボタンを実装せず、『画像を切り替える 』 コア部分のコードを書いています。

特にJavaScriptを学び始めた方、脱jQueryを考えている方におすすめです。

ではさっそくいきましょう。

※ちなみにちゃんとJavaScriptを学ぶには、こちらの3万部越えの書籍が良書。書籍選びに迷ってる人は、間違いなし。 レベルは理解できれば中級、全くの初級者にはかなり難しい。入浴中まで読みまくりボロボロのかわうそのバイブル 。

クリックで画像を切り替えてみよう:初級編

まずもっとも簡単なパターンから作成してみましょう。

たった数行の記述でokです。

下の画像をクリックしてみて下さい。

いかがでしょうか。

コードを少し解説しておきますね。

これでimgListに表示させる画像を登録しています。オブジェクト形式で格納していますが、もちろん通常の配列でもokです。すべてpng形式で決まっているなら、拡張子も不要でもokです。

ただし、あとからスライドが追加になった・・・とかなると面倒なので、オブジェクトのほうが便利でしょう。

あとは、指定の要素をクリックしたときに、numを1ずつ増やすことで、呼び出す画像をimage1, image2と切り替えています。

今回最大がimage3なので、num = 3になった場合、num = 4にならないようにif文でnum = 0と初期化するようにしています。

もしスライドの追加などの拡張性を考えるならば、

要素数をプログラムで指定してあげると、さらにスマートです!

これがコアな実装になるので、プレビューボタンやネクストボタンを配置し、スクリプトを少し書き換えれば、モダンなスライドができあがりです!

クリックで画像を切り替えてみよう:中級編

先ほどよりも難易度がグーンと上がっています。

じっくりコードを読み解いてくださいね。

ポイントは、変数はsetImgFuncが関数リテラルであり、その即時関数がリターンした関数を格納している点です!

で何が格納されているのか確認してみてください。

↓画像をクリックすると切り替わります↓

この書き方は『クロージャ 』 を使っています。

冒頭に紹介した教本にも漏れなく出現、 皆さんが乗り越える壁です。 かわうそもめっちゃ苦しみました。

num 』が外部から変更されない保守性の高さがメリットです。

もし『クロージャ 』が初耳だ!という方がいれば、まずは『スコープの定義』から勉強してみると、基礎が固まって効率よさげです。

一定時間ごとに画像を切り替えてみよう

最後に、一定間隔で自動で画像を切り替える記述をしてみましょう。

使用するのはこちらの関数。

さっそくやってみましょう。

変更したのはこの部分のみです!

これで1000ミリ秒 = 1秒 間隔で、setImgFuncが実行されるようになりました!

以上がJavaScriptで画像を切り替える方法でした。

フォローする