おなじみのスライダーだ。実際は人が作ったプラグインを利用させてもらうことの方が多いが、自分で一度作っておくとプラグインを利用する際でも理解度が違う。一度は自分でつくってみよう。
準備
1.以下のファイルをダウンロードし、好きな場所に解凍する。
2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLesson04としよう。
スライダーの作成(基本)
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="slider">
<div class="slideContainer">
<img src="images/slide-1.jpg">
<img src="images/slide-2.jpg">
<img src="images/slide-3.jpg">
</div>
</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を以下のように編集。
.slider{
overflow:hidden;
position:relative;
width:960px;
height:415px;
margin:0 auto;
}
.slideContainer{
position:absolute;
width:100%;
height:100%;
}
.slideContainer img{
position:absolute;
}
6.main.jsを以下のように編集。
$(function(){
$('.slider').each(function(){
var $slider=$(this);
var $slideContainer=$slider.find('.slideContainer');
var $slides=$slideContainer.find('img');
var index=0;
$slides.each(function(i){
$(this).css({left:i*100+"%"});
});
setInterval(function(){
$slideContainer.animate({left:-100*(++index%$slides.length)+'%'},500,'easeInOutExpo');
},3000);
});
});
[別解]
一手間加えることで、ループを実現できる。
$(function(){
$('.slider').each(function(){
var $slider=$(this);
var $slideContainer=$slider.find('.slideContainer');
var $slidesOrg=$slideContainer.find('img');
//先頭の要素を複製
var $first=$slidesOrg.eq(0).clone();
//コンテナに追加
$slideContainer.append($first);
//コンテナにある画像を全て取得
var $slides=$slideContainer.find('img');
//画像それぞれの位置を決める(横並び)
$slides.each(function(i){
$(this).css({left:i*100+"%"});
});
//アニメーション処理
var index=0;
setInterval(function(){
//アニメーション後、最後の要素だったら最初に戻す
$slideContainer.animate({left:-100*(++index)+'%'},500,'easeInOutExpo',function(){
if(index=== $slides.length-1){
index=0;
$slideContainer.css({left:'0px'});
}
});
},3000);
});
});
7.実行してみよう。スライドしながら画像が入れ替わることが確認できる。
マウスホバーでの停止機能追加
8.main.jsを以下のように編集しよう。
$(function(){
$('.slider').each(function(){
var $slider=$(this);
var $slideContainer=$slider.find('.slideContainer');
var $slides=$slideContainer.find('img');
var index=0;
//追加
var id;
$slides.each(function(i){
$(this).css({left:i*100+"%"});
});
//関数として定義する
function startInterval(){
//setIntervalの戻り値をとると、その戻り値を使用して止めることができる
id=setInterval(function(){
$slideContainer.animate({left:-100*(++index%$slides.length)+'%'},500,'easeInOutExpo');
},3000);
}
//イベント登録(解説あり）
$slider.on({
mouseenter:function(){clearInterval(id);},
mouseleave:startInterval
});
//開始
startInterval();
});
});
[解説]
$slider.on({
mouseenter:function(){clearInterval(id);},
mouseleave:startInterval
});
要素に複数のイベントを登録する際にはオブジェクト形式で設定することができる。
{
イベントの種類:関数,
イベントの種類:関数
}
プロパティにイベントを設定できるのは自然だが、jsでは値のほうに関数を登録できる。
jsでは関数はオブジェクトである
この場合、関数名は参照を保持する単なる変数名である。そこを理解すると
mouseleave:startInterval
ここの部分も腑に落ちるであろう。
関数名は単なる参照を保持する変数なので以下のようなこともできる。
function fuga(){
console.log("fuga");
}
var hoge=fuga;
hoge(); //->fuga
}
jsでは関数を保持している変数に()をつけると関数が実行されることも覚えておこう。
コメント