bxsliderまとめ

JavaScript

DL：http://bxslider.com/

・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(); }
	});
});

と書き換え、停止した後に自動再生するようにする。