JavaScriptで画像を切り替える方法とは【メンターが回答】

「JavaScriptで画像を切り替える方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。実際にJavaScriptで1秒ごとに画像を切り替えるプログラムを書いています。ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptで画像を切り替える方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

JavaScriptで1秒ごとに画像を切り替えるプログラムを作りたいと思っています。

以下にソースコードを書いているのですが、切り替えることができませんでした。正しい書き方を教えていただけると有難いです。

 

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      img{
        width:50%;
        height:50%;
      }
    </style>
    <img src="" name="SOKUDOKU">
    <script>
      img = ["IMG_0273.JPG", "IMG_0275.JPG", "IMG_0276.JPG", "IMG_0274.JPG", "IMG_0270.JPG", "IMG_0272.JPG", "IMG_0271.JPG", "IMG_0269.JPG", "IMG_0265.JPG", "IMG_0266.JPG"];
      count = -1;
      timer = setTimeout(imgTimer, 1000);
      function imgTimer() {
        count++;
        document.SOKUDOKU.src = img[count];
        if (count >= 9) {
          clearTimeout(timer);
        }
      }
    </script>
  </head>
</html>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

以下にソースコードを書いています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      img {
        width:50%;
        height:50%;
      }
    </style>
    <img src="" name="SOKUDOKU">
    <script>
      var count = -1;
      var img = [
        "https://dummyimage.com/600x400/000/fff&text=1",
        "https://dummyimage.com/600x400/000/fff&text=2",
        "https://dummyimage.com/600x400/000/fff&text=3",
        "https://dummyimage.com/600x400/000/fff&text=4",
        "https://dummyimage.com/600x400/000/fff&text=5",
        "https://dummyimage.com/600x400/000/fff&text=6",
        "https://dummyimage.com/600x400/000/fff&text=7"
      ];
      function imgTimer() {
        var i = count++;
        document.SOKUDOKU.src = img[i % (img.length)];
      }
      setInterval(imgTimer, 1000);
    </script>
  </head>
</html>

以上、JavaScriptで画像を切り替える方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptで画像を切り替える方法について解説したよ。

大石ゆかり

setTimeoutではだめですか?

田島悠介

setTimeoutはその時間後に一度だけ関数を実行するので一定間隔だとsetIntervalがいいね。切り替えにはJavaScriptで該当のimgタグのsrc属性を操作します。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。