今回は、web初心者向けに簡単にフェードイン・フェードアウトするスライドショーのjQueryを実装します。コードも数行しかないので簡単にできると思います。
photo credit: magro_kr via photopin cc
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
これが無いと動きません。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('.slideimg img:gt(0)').hide(); setInterval(function() { $('.slideimg :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slideimg');},4000); }); |
:gt(index)
マッチした要素のうち、指定されたインデックス(0から始まる)より大きいインデックス番号の要素を返します。
HTMLを設置します STEP3
|
1 2 3 4 5 6 7 8 |
<div class="slideimg"> <img src="images/016/01.jpg" /> <img src="images/016/02.jpg" /> <img src="images/016/03.jpg" /> <img src="images/016/04.jpg" /> <img src="images/016/05.jpg" /> <img src="images/016/06.jpg" /> </div> |
＜div id="slideimg"＞も忘れないでください。CSSで制御する箇所がありますので。
CSSを記述します STEP4
|
1 2 3 4 5 6 7 8 9 10 |
.slideimg{ position:relative; width: 680px; margin:0 auto; } .slideimg img { position:absolute; left:0; top:0; } |
画像を一つに重ねるCSSをつけました。
まとめ
[サンプル] jQuery 簡単に実装できる自動で画像のフェードイン・フェードアウトの実装方法
よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。(画像のパスは環境に合わせてください)
画像が自動で変わるjQueryは、サイトのメイン画像などでよく使われますのでぜひ試してみてください。
※firefox、クローム、IEで動いていることを確認しております。
