新しいトップページをつくってみた
④スライドショー
トップページ制作過程の第4回目は、
jQueryを使ってスライドショーを追加してみました。
備忘録として残しておきます。
1.スライドショー概要
追加したスライドショーは、5秒毎に自動で次の画像に切り替わります。また、左右のナビボタンを押しても切り替わります。
画像下部には、ページングボタン（スライド中の現在位置を示すボタン）を配置しました。
2.スライドショーベース作成
front-page.phpとstyle.cssにカルーセルのベースとなる要素を配置していきます。
具体的には、以下の様なコードをfront-page.php に記載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- スライドショー --> <div id="slideGalley"> <ul id="slide"> <li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow1.jpg" alt=""></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow2.jpg" alt=""></a></li> <li><a href="#"><img src="<?php echo get_template_directory_uri();?>/images/slideshow3.jpg" alt=""></a></li> </ul> <div id="nav"> <img src="<?php echo get_template_directory_uri();?>/images/nav_prev.png" class="prev"> <img src="<?php echo get_template_directory_uri();?>/images/nav_next.png" class="next"> </div> <ul id="paging"></ul> </div> |
style.cssには以下のように実装します。
（注意：実際私のサイトに合わせて調整していますので、個別にレイアウト調整が必要です。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* スライドショー */ #slideGalley { width: 100%; overflow: hidden; position: relative; margin-bottom: 20px; } #slide { width: 10000px; list-style-type: none; margin: 0; padding: 0; } #slide li { float: left; } #paging { text-align: center; position: absolute; /* width: 100%; */ bottom: 10px; list-style-type: none; padding: 0; margin: 0; } #paging li { display: inline-block; *display: inline; *zoom:1; width: 20px; height: 20px; background: url(./images/page.png); } #paging li.active { background: url(./images/page_active.png); } #nav .prev { position: absolute; left: 10px; top: 60%; margin-top: -50px; width: 25px; height: 50px; } #nav .next { position: absolute; right: 10px; top: 60%; margin-top: -50px; width: 25px; height: 50px; } |
コード説明
スライドショーを表示する領域をdiv要素で囲み、idをslideGalleyとします。
slideGalleyのwidthは、親要素の幅に合わせて100%に設定し、overflow:hiddenを指定しています。
また、ナビボタンやページングをposition:absoluteで配置するため、slideGalleyのpositionはrelativeに設定します。
ul要素のslideは、画像をfloatで横並べにしていくので、画像数が増えても対応できるようにwidthを10000pxにしています。ページング用のli要素(paging)は、class属性のactiveが付いている場合は、灰色の画像を指定し、activeが付いていない場合は、白色の画像を表示するようにCSSで設定しています。
3.jQueryでスライドショーを実装
jQueryを使って以下のように実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
//ページングの設定 jQuery("#slide li").each(function(){ jQuery("#paging").append(jQuery("<li></li>").attr("data-img", jQuery("img",this).attr("src"))); }); jQuery("#paging li:first-child").addClass("active"); //自動スライドの実行 var timerId = setInterval(function(){ jQuery("#nav .next").click(); },5000); //自動スライドの制御 jQuery("#slideGalley").hover(function(){ jQuery("#nav").show(); clearInterval(timerId); },function(){ jQuery("#nav").hide() timerId = setInterval(function(){ jQuery("#nav .next").click(); },5000); }); //右矢印ボタンが押された際の挙動 jQuery("#nav .next").click(function(){ jQuery("#slide:not(:animated)").animate({ "margin-left" : -1*jQuery("#slide li").width() },function(){ jQuery("#slide").css("margin-left","0").append(jQuery("#slide li:first-child")); jQuery("#paging li.active").removeClass("active"); jQuery("#paging li[data-img='"+jQuery("#slide li:first-child img").attr("src")+"']").addClass("active"); }); }); //左矢印ボタンが押された際の挙動 jQuery("#nav .prev").click(function(){ jQuery("#slide:not(:animated)") .css("margin-left",-1*jQuery("#slide li").width()) .prepend(jQuery("#slide li:last-child")) .animate({ "margin-left" : 0 },function(){ jQuery("#paging li.active").removeClass("active"); jQuery("#paging li[data-img='"+jQuery("#slide li:first-child img").attr("src")+"']").addClass("active") }); }); |
コード説明
最初のページングの設定では、画像の下に配置するページング(li要素）を#paging内に挿入しています。
自動スライドの実行では、setIntervalを使って、5000ミリ秒ごとに右ナビボタンのクリックイベントを実行しています。
自動スライドの制御では、#slideGalleyにマウスが乗った時に、ナビボタンを非表示にして、タイマーを停止します。マウスが外れたときにナビボタンを再表示し、タイマーを起動して自動スライドを再開します。
次に右ナビキーが押された時の挙動を設定しています。スライド中にナビを連続クリックされないように、#slide:not(:animated)として、アニメーション中ではない場合のみを対象としています。
アニメーションは、1枚目のスライドの横幅をマイナスにした値を#slideのmargin-leftに設定することで、スライドを左に動かしています。
最後に左ナビキーが押された時の挙動を設定しています。CSSのmargin-leftにスライド横幅だけマイナス指定し、#slideの最後のli要素をprepend()で先頭に移動しています。
そして、animateを使ってmargin-leftを0にすることで、右から左にスライドする動きを付けています。
4.最後に
以上、jQueryを使ってスライドショーの制作をご紹介しました。
少しでも参考になれば幸いです。
スポンサーリンク
