【jQuery】画像を交互に表示させる方法【fadeIn()】
2020.04.26 /
この記事では、オシャレなホームページでしばしば使用される、画像を交互に表示させる方法についてご紹介します。
使用する言語はJavaScriptのライブラリであるjQueryです。メソッドにはfadeIn()とfadeOut()を使用します。
jQueryを勉強中の方や、ホームページを作成している方はぜひ参考にしてください。
画像を交互に表示させるプログラム
今回は画像の交互表示ですね！ではさっそくやり方を教えてくれますか？
やり方の前に、まずは実際にどのように画像が交互に表示されるかを見てみましょう。
コードの記述方法や解説については後述しますので、まずはブラウザ上での動きを確認してください。
※ブラウザでJavaScriptをOffにしている方は、ONにして確認してください
上記の交互に画像が表示されるプログラムはいかがでしたか？
それではコードの記述方法から、使用したjQueryメソッドについて下記に記します。
記述したコード
上記に表示している、交互に画像を表示されるプログラムはjQuery(JavaScript)を使用しています。
下記にそのコードを記しますので、どうやって書かれているのかご確認ください。
var current=1;
var next=2;
var max_count=4;
$(function(){
var timer;
timer=window.setInterval(fadeinout,3000);
});
function fadeinout(){
$("#image-change"+next).fadeIn(1000);
$("#image-change"+current).fadeOut(500);
current=next;
next++;
if(next > max_count){
next=1;
}
}jQueryのコードで使われているメソッドはこの後ご説明いたします。
次にHTMLとCSSも記載いたしますので、上記jQueryの変数などがどこで使われているのかをご確認ください。まずはHTMLのコードです。
<div id="image-wrapper1">
<div class="image-wrapper2">
<p><img src="画像のパス" id="image-change1" class="image-change"></p>
<p><img src="画像のパス" id="image-change2" class="image-change"></p>
<p><img src="画像のパス" id="image-change3" class="image-change"></p>
<p><img src="画像のパス" id="image-change4" class="image-change"></p>
</div>
</div>最後にCSSのコードを記載いたします。
#image-wrapper1{
width: 100%;
height:400px;
}
.image-wrapper2{
width:100%;
max-width:600px;
margin:0 auto;
}
.image-change{
position:absolute;
width:100%;
max-width:600px;
height:100%;
max-height:350px;
}
#image-change2{
display:none;
}
#image-change3{
display:none;
}
#image-change4{
display:none;
}コードを見て、なんとなく意味はわかりましたか？
次は上記プログラムのjQueryで使用したメソッドについて説明します。
使用したjQueryメソッドの説明
fadeIn()とは
jQueryのメソッドであるfadeIn()は、非表示である要素を時間をかけてフェードイン表示させます。
このメソッドを使うことにより、CSSでdisplay:noneだった要素を表示させることができます。
フェードインする時間を調整することにより、ぼわーっと徐々に表示される演出を出すことができる、とても便利なメソッドです。
fadeIn()の使い方
それではfadeIn()の実際の使い方をご説明していきます。
上記のコードに記されているように、フェードインしたいHTML要素を指定し、引数に時間を設定すればOKです。
$("HTML要素").fadeIn(時間（省略可）);表示させる時間はミリ秒を単位で指定、もしくは「slow」「normal」「fast」 の値で指定することもできます。
例えば、数値が"2000"であれば、2秒かけてアニメーションが行われます。
また対象とするHTML要素は複数指定することもできます。
画像を交互に表示させるプログラムでは、id属性がimage-change+next（数値）の画像を1秒かけて表示させるという内容です。
$("#image-change"+next).fadeIn(1000);fadeIn()により画像は表示することができますが、表示してあった画像はそのまま残ってしまう為、古い画像は非表示にする必要があります。
そこで使用するメソッドは次にご説明するfadeOut()メソッドです。
fadeOut()とは
jQueryのメソッドであるfadeOut()は、表示中の要素を時間をかけてフェードアウトさせます。
フェードアウトする時間を調整することにより、ぼわーっと徐々に消えていく演出を出すことができる、とても便利なメソッドです。
fadeOut()の使い方
それではfadeIn()の実際の使い方をご説明していきます。
fadeOut()はすでに紹介しているfadeIn()とは逆だと考えていただければ大丈夫です。
上記のコードに記されているように、フェードアウトしたいHTML要素を指定し、引数に時間を設定すればOKです。
$("HTML要素").fadeOut(時間（省略可）);非表示させる時間はミリ秒を単位で指定、もしくは「slow」「normal」「fast」 の値で指定することもできます。
例えば、数値が"2000"であれば、2秒かけてアニメーションが行われます。
また対象とするHTML要素は複数指定することもできます。
画像を交互に表示させるプログラムでは、id属性がimage-change+current（数値）の画像を0.5秒かけて非表示させるという内容です。
$("#image-change"+next).fadeIn(500);これまでに紹介した2つのメソッドを記述するだけでは、画像を交互に表示させることはできません。
なぜならこれらメソッドを実行するためのイベントがないからです。
次は、メソッドを実行するためのイベント処理について説明します。
メソッドを実行するイベント
紹介したfadeIn()やfadeOut()のメソッドを実行するためには、何かしらのイベント処理が必要になります。
イベント処理とは、例えばマウスをクリックしたらとか、マウスが特定の要素に重なったらなどです。
今回ご紹介したコードでは、setIntervalを使って、一定時間ごとに特定の処理を繰り返すタイマー処理を行っています。
setIntervalはタイマー処理っていうのを行ってるんですね。ちなみに止まることはあるんですか？
clearIntervalなどの処理を行わない限り、ずっとタイマー処理は続きます。
今回ご紹介したプログラムでは、3秒ごとにfadeinout()を実行するタイマー処理が設定してあります。
timer=window.setInterval(fadeinout,3000);今回のプログラムでは、タイマー処理を止めるコードはないため、ずっと交互に画像は表示されます。
まとめ
それでは今回紹介した「交互に画像を表示するプログラム」の重要なポイントをおさらいしましょう。
交互に表示するのにjQueryを使用している
使うメソッドはfadeIn()とfadeOut()の2つ
イベント処理にはタイマー処理を用いる
オシャレなサイトでは、トップページのヘッダーに画面いっぱいに大きく画像を交互に表示させたりしています。その際に使われるのが今回紹介したfadeIn()やfadeOut()です。
ぜひ覚えて、サイトに使ってみてください。
関連記事
