jQueryで画像のsrc属性を切り替えて別の画像を表示させる方法!

画像を表示するために用いるのがimgタグで、そのsrc属性で表示する画像のパスを指定します。そのためsrc属性を書き換えることで画像を切り替えることができます。この記事ではjQueryで画像のsrc属性を切り替えて別の画像を表示させる方法を紹介しています。

コンテンツ [表示]

  1. 1jQueryで画像のsrc属性を切り替えて別の画像を表示させたい
  2. 2jQueryで画像のsrc属性を切り替えて別の画像を表示させる方法
  3. 2.1クリックすると切り替える
  4. 2.2クロスフェードしながら切り替える
  5. 3まとめ

jQueryで画像のsrc属性を切り替えて別の画像を表示させたい

WEBサイトを作る上で、img要素のsrc属性を切り替えることが必要になってくる場面があります。それはボタンをクリックすると画像を切り替えたり、数秒おきに画像を入れ替えるなどの機能を実装する際に必要となってきます。

一見難しそうに思いますが、jQueryを使うことで簡単にimg要素のsrc属性を切り替えることができます。

この記事ではサンプルコードを使って、その方法について解説していきます。

Photo byPexels

jQueryで画像のsrc属性を切り替えて別の画像を表示させる方法

2つのパターンでimg要素のsrc属性を書き換えていきたいと思います。

クリックすると切り替える

まずはボタンをクリックすることで、画像が切り替わるようにしていきます。

index.js

const imgs = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];  // 画像ファイル名
let index = 0;  // インデックス番号

配列imgsには変更したい画像ファイル名の文字列を要素として定義します。

変数indexは配列のインデックス番号を表し、初期値として0を代入しています。

index.html

<img class="img">

index.js

// 初期画像の表示
$('.img').attr('src', 'images/' + imgs[index]);

attrメソッドは取得したタグ要素の第一引数に指定した属性に第二引数に指定した値を設定します。

あわせて読みたい
attr()
jQueryのattr()はHTMLの要素の属性の値を取得や、変更、追加をすることが出来るメソッドです。attr()の使い方をサンプルコード付きで解説いたします。

ここでは取得した.img要素のsrc属性に画像ファイルのURLを指定します。

URLの一部は配列imgsと変数indexを用いて、配列の0番目の要素として定義されている画像ファイル名となります。

この処理を記述しておくことで、最初に画面が表示された際にもしっかりと画像が表示されるようになります。

index.html

<div id="changeBtn" class="btn btn-primary mt-3">クリック</div><!-- .btn btn-primary -->

index.js

// ボタンクリックイベント
$('#changeBtn').click(function(){
  // 最後の画像判定
  if(index == imgs.length - 1){
    index = 0;
  }else{
    index++;
  }
  // 画像の切り替え
  $('.img').attr('src', 'images/' + imgs[index]);
});

最後にボタンをクリックした際に画像が変更される処理を記述していきます。

取得した#changeBtn要素にclickイベントを設定します。clickイベントの引数にはコールバック関数を指定します。

あわせて読みたい
click()
jQueryのclick()は要素をクリックした時、つまりクリックイベントの際に実行する関数を紐付けるメソッドです。click()の使い方をサンプルコード付きで解説します。

clickイベントの中でimg要素のsrc属性を変更する処理を実行します。

変数indexを更新することで画像を変更していきます。変更される前の画像が最後の画像だった場合、変更後は最初の画像にループするように条件分岐を行います。

具体的には変数indexは配列のインデックス番号を表しているので、クリックされるたびにindex++と更新させていきます。最後の画像の場合のみindex=0でインデックス番号をリセットします。

indexを更新した後に、初期画像を表示したときと同じようにattrメソッドを使ってsrc属性を書き換えることで画像を変更します。

クロスフェードしながら切り替える

次に、クロスフェードしながら自動的に画像を切り替えていきます。

index.html

<div class="img__inner">
  <img class="img" src="images/img1.jpg">
  <img class="img" src="images/img2.jpg">
  <img class="img" src="images/img3.jpg">
  <img class="img" src="images/img4.jpg">
</div><!-- .img__inner -->

今回は切り替える画像の数だけimgタグをHTML側で最初から記述しておきます。また、すべてに同じクラス名を指定します。

index.css

.img__inner{
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.img{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 1.0s;
}

.current-img{
  opacity: 1;
  z-index: 20;
}

クロスフェードしながら、画像を切り替えるためにはCSSも少し記述する必要があります。

最初の状態では全ての画像を非表示にしておくため、.imgセレクタにopacity: 0を指定します。また、クロスフェードを実現するためにtransition: all 1.0sを指定します。こうすることで、1秒間かけて画像の切り替えが行われます。

ここで画像を表示するためのクラスを用意しておきます。.current-imgセレクタを用意し、opacity: 1z-index: 20を指定することで表示します。後にjQueryでこのクラスを付け外しすることで画像の表示非表示を切り替えていきます。

 

index.js

// 初期画像の表示
let index = 0;
$('.img').eq(index).addClass('current-img');

$('.img').imgセレクタに該当する全ての要素を取得することが出来ます。また、eqメソッドを用いることで取得した要素の中から引数に指定したインデックス番号の要素だけを取得することが出来ます。

ここでは一番先頭の0番目の要素だけを取得して、.addClass()メソッドでcurrent-imgクラスを加えて画像を表示しています。

あわせて読みたい
eq()
jQueryの.eq()はセレクタにマッチした要素郡の中から引数で指定した整数の順番の要素に対しての絞り込みを行います。要素を絞り込みjQueryで処理対象となる要素を変更する(横断)際に利用します。.eq()の使いい方をサンプルコード付きで解説します。
あわせて読みたい
addClass()
jQueryのaddClass()はセレクタでマッチした要素に対して、addClass(class)の引数で指定したクラスを追加するメソッドです。使い方をサンプルコード付きで解説します。

この変数indexを更新していくことで画像の表示非表示を切り替えていきます。

index.js

setInterval(function(){
  // 非表示
  $('.img').eq(index).removeClass('current-img');
  // 画像の最後判定
  if(index == $('.img').length - 1){
    index = 0;
  }else{
    index++;
  }
  // 表示
  $('.img').eq(index).addClass('current-img');
}, 5000);

setIntervalメソッドは第一引数に指定した関数を第二引数で指定した時間ごとに繰り返し実行します。

今回は第一引数にはコールバック関数でその中で画像を切り替える処理を記述し、5秒ごとにその処理を繰り返します。

まず、.removeClass()メソッドを用いて、元々表示していた画像を非表示にします。

あわせて読みたい
removeClass()
jQueryのremoveClass()はセレクタでマッチした要素に対して、removeClass()の引数で指定したクラスを削除するメソッドです。removeClass()の使い方をサンプルコード付きで解説します。

その後、条件分岐を用いてindexを更新します。

最後に更新したindexを用いて、画像を表示することで画像の切り替えを実現しています。

まとめ

jQueryで画像を切り替える方法を紹介してきました。サンプルコードを参考にしてぜひ自分なりにカスタマイズしてみてくださいね。

GeekHive採用サイト

関連記事