jQueryで画像のsrc属性を切り替えて別の画像を表示させる方法!
画像を表示するために用いるのがimgタグで、そのsrc属性で表示する画像のパスを指定します。そのためsrc属性を書き換えることで画像を切り替えることができます。この記事ではjQueryで画像のsrc属性を切り替えて別の画像を表示させる方法を紹介しています。
jQueryで画像のsrc属性を切り替えて別の画像を表示させたい
WEBサイトを作る上で、img
要素のsrc
属性を切り替えることが必要になってくる場面があります。それはボタンをクリックすると画像を切り替えたり、数秒おきに画像を入れ替えるなどの機能を実装する際に必要となってきます。
一見難しそうに思いますが、jQueryを使うことで簡単にimg
要素のsrc
属性を切り替えることができます。
この記事ではサンプルコードを使って、その方法について解説していきます。
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
メソッドは取得したタグ要素の第一引数に指定した属性に第二引数に指定した値を設定します。
ここでは取得した.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
イベントの中で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: 1
とz-index: 20
を指定することで表示します。後にjQueryでこのクラスを付け外しすることで画像の表示非表示を切り替えていきます。
index.js
// 初期画像の表示
let index = 0;
$('.img').eq(index).addClass('current-img');
$('.img')
で.img
セレクタに該当する全ての要素を取得することが出来ます。また、eq
メソッドを用いることで取得した要素の中から引数に指定したインデックス番号の要素だけを取得することが出来ます。
ここでは一番先頭の0
番目の要素だけを取得して、.addClass()
メソッドでcurrent-img
クラスを加えて画像を表示しています。
この変数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()
メソッドを用いて、元々表示していた画像を非表示にします。
その後、条件分岐を用いてindex
を更新します。
最後に更新したindex
を用いて、画像を表示することで画像の切り替えを実現しています。
まとめ
jQueryで画像を切り替える方法を紹介してきました。サンプルコードを参考にしてぜひ自分なりにカスタマイズしてみてくださいね。