サイトトップページでよく見られる、フェードで切り替わるメイン画像を簡単に表示してくれるjQueryの「fade-viewer」、
極々シンプルにフェードを繰り返してくれるだけですが、汎用性が高いので使いやすいです。
1.HTMLを記述
|
1 2 3 4 5 6 |
<div id="fade-viewer"> <img src="images/img1.jpg" width="800" height="300" alt="" /> <img src="images/img2.jpg" width="800" height="300" alt="" /> <img src="images/img3.jpg" width="800" height="300" alt="" /> <img src="images/img4.jpg" width="800" height="300" alt="" /> </div><!--/#fade-viewer--> |
ID名「fade-viewer」と名付けたdiv要素の中に<img>タグで4枚画像を並べています。
※ID名は任意です。
2.CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 |
#fade-viewer { width: 800px; height: 300px; overflow: hidden; position: relative; } #fade-viewer img { top: 0; left: 0; position: absolute; } |
<img>要素を親要素の<div>に対して「position:absolute;」にします。
3.JavaScriptを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#fade-viewer'; var fadeSpeed = 1500; //フェードのスピード var switchDelay = 5000; //画像を切り替えるタイミング $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> |
以上になります。
