※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

このページでは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でどのくらいの速さで画像が切り替わるか、を指定する事が可能です。

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

以上

添付ファイル