準備
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要素を取得している。(今回は３つ)
その要素を$slidesという変数に代入している。この＄は単なる変数名につけているだけなのでなくても問題ない。ただ、それがjQueryオブジェクトとわかりやすいため、つけるコーディングルールを採用している場合も多い。
$slides.eq(i).fadeIn();
複数要素の特定のインデックスを指定する場合にeq(index)が使える。fadeIn()はdisplay:noneになっている要素をフェードインさせる。
setInterval(function(){処理},3000);
setIntervalはjavascpriptの機能、第２引数の時間ごとに第１引数の処理を繰り返し行う。
コメント