bxsliderまとめ
・UTF-8でなくても動く(かもしれない)
・jquery-1.9.1.jsで動くことは確認
・javascriptより先にCSS読み込んだ方がいい?
スタンダードバージョン
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="jquery.bxslider.css" type="text/css" /> <script src="jquery-1.9.1.min.js"></script> <script src="jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#sub_image', speed: 1000, mode: 'fade' }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/main_01.jpg" /></li> <li><img src="images/main_02.jpg" /></li> <li><img src="images/main_03.jpg" /></li> <li><img src="images/main_04.jpg" /></li> </ul> <ul id="sub_image"> <li><a data-slide-index="0" href="">トピックス1</a></li> <li><a data-slide-index="1" href="">トピックス2</a></li> <li><a data-slide-index="2" href="">トピックス3</a></li> <li><a data-slide-index="3" href="">トピックス4</a></li> </ul> </body> </html>
ata-slide-indexの番号が順番に割り当てられているので、1番目の画像だけナビゲーションを設置しないという場合は、data-slide-indexを1から割り当てる。
ナビゲーション部分をマウスオーバーで動かす場合は、619行目
slider.pagerEl.delegate('a', 'click', clickPagerBind);
を
slider.pagerEl.delegate('a', 'mouseover', clickPagerBind);
に変更。
また、同時に、
$(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#sub_image', speed: 1000, mode: 'fade' }); });
を
$(document).ready(function(){ var obj = $('.bxslider').bxSlider({ auto: true, pagerCustom: '#sub_image', speed: 1000, mode: 'fade', onSlideAfter: function(){obj.startAuto(); } }); });
と書き換え、停止した後に自動再生するようにする。