「jQueryで画像のスライドショーを実装する」の編集履歴（バックアップ）一覧はこちら

「jQueryで画像のスライドショーを実装する」(2015/07/10 (金) 16:35:39) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

このページではjQueryを使って簡単なスライドショーを作る方法を解説していきます。~
この方法では、何かファイルをダウンロードしたりする必要もないのでかなり楽にできます。~
下のような感じで変化していきます。
#image(width=400,スライドショー.png)
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>

このページではjQueryを使って簡単なスライドショーを作る方法を解説していきます。~
この方法では、何かファイルをダウンロードしたりする必要もないのでかなり楽にできます。~
下のような感じで変化していきます。
#image(width=400,スライドショー.png)
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でどのくらいの速さで画像が切り替わるか、を指定する事が可能です。~

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