準備

1.以下のファイルをダウンロードし、好きな場所に解凍する。


2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLesson03としよう。

スライドショーの作成

3.下をダウンロードして、3枚の画像をimagesフォルダに置く。


4.index.htmlを以下のように編集

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
       <div id="container">
         <div class="slideshow">
            <img src="images/slide-1.jpg">
            <img src="images/slide-2.jpg">
            <img src="images/slide-3.jpg">
         </div>

       </div>
      <script src="js/vendor/jquery-1.12.4.min.js"></script>
      <script src="js/vendor/jquery-ui-1.12.1.min.js"></script>
      <script src="js/vendor/jquery.easing.1.3.js"></script>
      <script src="js/main.js"></script>
    </body>
</html>

5.main.cssを以下のように編集。

.slideshow{
  overflow:hidden;
  position:relative;
  width:960px;
  height:415px;
  margin:0 auto;
}
.slideshow img{
  display: none;
  position:absolute;
}

6.main.jsを以下のように編集。

$(function(){
  $('.slideshow').each(function(){
    var $slides=$(this).find('img');
    var i=0;
    $slides.eq(i).fadeIn();
    setInterval(function(){
      $slides.eq(i++).fadeOut();
      if(i==$slides.length){i=0;}
      $slides.eq(i).fadeIn();
    },3000);
  });
});

7.実行してみよう。フェイドしながら画像が入れ替わることが確認できる。
[解説]

var $slides=$(this).find('img');

slideshowというクラスがついて要素に対してそれぞれeachで処理を行っている。ここでの$(this)はslideshowというクラスがついている要素の一つ一つ(今回は一つしかない)。その要素からfindで子孫検索を行いimg要素を取得している。(今回は3つ)
その要素を$slidesという変数に代入している。この$は単なる変数名につけているだけなのでなくても問題ない。ただ、それがjQueryオブジェクトとわかりやすいため、つけるコーディングルールを採用している場合も多い。

 $slides.eq(i).fadeIn();

複数要素の特定のインデックスを指定する場合にeq(index)が使える。fadeIn()はdisplay:noneになっている要素をフェードインさせる。

setInterval(function(){処理},3000);

setIntervalはjavascpriptの機能、第2引数の時間ごとに第1引数の処理を繰り返し行う。