jQueryを使用して、複数の画像をクロスフェードしたり、スライドショーしたりするプラグインは色々あります。
設定がわかりやすく、シンプルな処理のものを探していたところ、下記のページを見つけました。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法
とてもシンプルで簡単に実装ができ、コードもわかりやすいのでおすすめです。
上記の設定をした時の方法をメモします。
■ 複数の画像をクロスフェードして切り替える
切り替えたい画像を用意し、下記のソースを記述します。
【JS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript">$(function(){ var setImg = '#viewer'; var fadeSpeed = 1000; var switchDelay = 3000; $(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> |
jQueryを読み込みます。
「setImg」にimgタグを囲う要素のidまたはclassを指定します。
「fadeSpeed」にはフェードするスピードを指定します。
「switchDelay」には画像が切り替える時間を指定します。
setInterval()を使用し、指定した時間で繰り返し処理を行っています。
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type="text/css">#viewer { margin: 0 auto; width: 900px; height: 300px; text-align: left; overflow: hidden; position: relative;}#viewer img { top: 0; left: 0; position: absolute;}</style> |
画像のサイズや位置等を指定します。
【HTML】
1 2 3 4 5 | <div id="viewer"> <img src="hoge1.jpg" /> <img src="hoge2.jpg" /> <img src="hoge3.jpg" /></div> |
表示したい画像のimgタグをjQueryで指定した要素の中に記述します。
画像を追加したい場合は、imgタグを追加します。
上記の設定をすれば、複数の画像をクロスフェードして切り替えながら、繰り返し表示することができます。
ソースもわかりやすいので自分なりにカスタマイズすることもできそうです。