準備
1.以下のファイルをダウンロードし、好きな場所に解凍する。
2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLesson03としよう。
スライドショーの作成
3.下をダウンロードして、3枚の画像をimagesフォルダに置く。
4.index.htmlを以下のように編集
04 | <meta charset="utf-8"> |
06 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
07 | <link rel="stylesheet" href="css/normalize.css"> |
08 | <link rel="stylesheet" href="css/main.css"> |
12 | <div class="slideshow"> |
13 | <img src="images/slide-1.jpg"> |
14 | <img src="images/slide-2.jpg"> |
15 | <img src="images/slide-3.jpg"> |
19 | <script src="js/vendor/jquery-1.12.4.min.js"></script> |
20 | <script src="js/vendor/jquery-ui-1.12.1.min.js"></script> |
21 | <script src="js/vendor/jquery.easing.1.3.js"></script> |
22 | <script src="js/main.js"></script> |
5.main.cssを以下のように編集。
6.main.jsを以下のように編集。
02 | $('.slideshow').each(function(){ |
03 | var $slides=$(this).find('img'); |
05 | $slides.eq(i).fadeIn(); |
06 | setInterval(function(){ |
07 | $slides.eq(i++).fadeOut(); |
08 | if(i==$slides.length){i=0;} |
09 | $slides.eq(i).fadeIn(); |
7.実行してみよう。フェイドしながら画像が入れ替わることが確認できる。
[解説]
1 | var $slides=$(this).find('img'); |
slideshowというクラスがついて要素に対してそれぞれeachで処理を行っている。ここでの$(this)はslideshowというクラスがついている要素の一つ一つ(今回は一つしかない)。その要素からfindで子孫検索を行いimg要素を取得している。(今回は３つ)
その要素を$slidesという変数に代入している。この＄は単なる変数名につけているだけなのでなくても問題ない。ただ、それがjQueryオブジェクトとわかりやすいため、つけるコーディングルールを採用している場合も多い。
複数要素の特定のインデックスを指定する場合にeq(index)が使える。fadeIn()はdisplay:noneになっている要素をフェードインさせる。
1 | setInterval(function(){処理},3000); |
setIntervalはjavascpriptの機能、第２引数の時間ごとに第１引数の処理を繰り返し行う。
コメント