準備
1.以下のファイルをダウンロードし、好きな場所に解凍する。
2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLessonfadeとしよう。
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>
<ul id="slidelist">
<li><img src="images/slide-1.jpg"></li>
<li><img src="images/slide-2.jpg"></li>
<li><img src="images/slide-3.jpg"></li>
</ul>
<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を以下のように編集
#slidelist{
position:relative;
width:960px;
height:415px;
margin:0 auto;
padding:0;
}
#slidelist li{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
list-style-type:none;
display:none;
}
親要素に対して、子要素を絶対配置にして重ねて表示している。
displayをnoneにして最初は非表示にしている。
6.main.jsを以下のように編集
$(function(){
//引数にli要素をラップするjQueryオブジェクト受け取る
function slideChange($target){
//li要素を取り出す(jQuery配列)
const $items=$target.find('li');
let index=0;//表示する画像のindex
function open(){
$items.eq(index).fadeIn(1200,'easeInQuad',function(){setTimeout(change,1500)})
}
function close(){
$items.eq(index).fadeOut(1200,'easeOutQuad');
}
function change(){
close();
//indexを画像枚数(0~2)で循環させる常套手段
index=++index%$items.length;
open();
}
open();
}
//呼び出し
slideChange($('#slidelist'));
});
fadeIn(),fadeOut()は引数に(時間,easing,コールバック)を設定できる。この場合のコールバックはfade作業が完了した際にコールバックで指定した処理を起動することができる。
今回はfunction slideChangeの内部に複数のfunctionを閉じ込めている。このように関連した処理をfunctionに閉じ込めて置くことで、外部から意図せずに呼び出されてしまうことがないため、安全性や保守性が高まる。
コメント