jQueryで画像のスライドショーを実装する - nicepaper @ ウィキ

このページではjQueryを使って簡単なスライドショーを作る方法を解説していきます。
この方法では、何かファイルをダウンロードしたりする必要もないのでかなり楽にできます。
下のような感じで変化していきます。

HTML

<div id="top_image">
  <ul>
    <li><img src="images/futta0847.jpg" class="reflect"/></li>
    <li><img src="images/futta2812.jpg" class="reflect"/></li>
    <li><img src="images/IMG_1935.jpg" class="reflect"/></li>
 </ul>
</div>

CSS

.reflect li {
  position: absolute;
  display: block;
}

※スライドショーを作る上でreflectというクラス名にする必要はありません。好きな名前で大丈夫です。

まずは上のようにリスト形式でスライドさせたい画像を入れていきます。
そしてhead部分に次のように記述します。

jQuery部分

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
   var $setElm = $('#top_image'),
   fadeSpeed = 1500,
   switchDelay = 4000;

   $setElm.each(function(){
       var targetObj = $(this);
       var findUl = targetObj.find('ul');
       var findLi = targetObj.find('li');
       var findLiFirst = targetObj.find('li:first');

       findLi.css({display:'block',opacity:'0',zIndex:'99'});
       findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

       setInterval(function(){
  findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
       },switchDelay);
   });
});
</script>

fadespeedでどのくらいの速さでフェードされるか、switchDelayでどのくらいの速さで画像が切り替わるか、を指定する事が可能です。

是非一度試してみてください。

以上