前回のフェイドを繰り返す処理に今回はサムネをクリックしたら画像が入れ替わる処理をいれる。
準備
1.以下のファイルをダウンロードし、好きな場所に解凍する。
2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLessonfade2としよう。
3.下をダウンロードして、6枚の画像を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="slideBox">
<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>
<ul id="thumblist">
<li><img src="images/slide-1-thumb.jpg"></li>
<li><img src="images/slide-2-thumb.jpg"></li>
<li><img src="images/slide-3-thumb.jpg"></li>
</ul>
</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を以下のように編集
#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;
}
#thumblist{
display: flex;
width:960px;
height:164px;
margin:0 auto;
justify-content: space-around;
align-items: center;
padding:0;
}
#thumblist li{
list-style-type:none;
}
6.main.jsを以下のように編集
$(function(){
function slideChange($target){
//メイン画像が入ったli配列
const $slides=$target.find('#slidelist li');
//サムネイル画像が入ったli配列
const $thumbs=$target.find('#thumblist li');
//サムネliのそれぞれに対してclickイベントを登録
$thumbs.each(function(i){
$(this).on('click',function(){
clickThumb(i);
});
});
//現在選択されている画像index
let current=0;
//選択されているindexのサムネと画像をfadein
function open(){
$thumbs.eq(current).stop().animate({opacity:1},500);
$slides.eq(current).stop().fadeIn(1200,'easeInQuad');
}
//fadeout処理
function close(){
$thumbs.eq(current).stop().animate({opacity:0.5},500);
$slides.eq(current).stop().fadeOut(1200,'easeOutQuad');
}
//サムネがクリックされた際、currentを書き換える
function clickThumb(num){
if(current != num){
close();
current=num;
open();
}
}
//最初の画像をfadein
open();
}
//起動
slideChange($('#slideBox'));
});
サムネイル用のli要素にクリックイベントを登録する際、indexを引数で渡すようにしている。(１つ目のli->0,2つ目->1,3つ目->2)このindexでfadeInさせる画像を決めるという仕組みだ。サムネイル画像とメイン画像の枚数は同じであることが前提の処理だ。
コメント