jQuery 画像をスライドさせる

バナー画像をスクロールさせよう。
そんな感じのをいろんなサイトで見かけるぞ。

ということで
そのいろんなサイトでバナーをスクロールさせているjQueryプラグイン bxSlider を使う。

使い方は簡単。
サイト(http://bxslider.com/)からファイルをダウンロードして、
使用しているサーバーの適切なディレクトリに配置。
使用したいページで呼び出す。

/*---------------------------------------------------------------------------*/

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.bxslider').bxSlider(
    auto:true,
    responsive:true,
    slideWidth:240 });
});
</script> <div id="title">bx_slider</div> <ul class="bxslider">
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic1.jpg" /></li>
</ul>

/*---------------------------------------------------------------------------*/

たったこれだけのコードでできちゃう！
便利便利。
オプションで色々設定もできるみたい。

今回は以下の二つのサイトを参考にしました。
http://wp-and.me/bxslider/
http://cotdeve.com/blog/jquery/jquery-%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC-bxslider/

ところでbxSliderのbxってなんなんだろう？　まさかboxじゃないよね。