jQueryのプラグインを利用することはあっても、
自分でプラグインを作ったことはありませんでした。

いつかはやろうと思っていたんですが、時間が経ってしまい、
とりあえず作ることができました。

出来たといっても、今回は、プラグインの作り方を知るという形で作成したので、
中身には簡単ものです。
これから機能を増やしていこうかなと思っています。

デモを作成したので、
ご覧ください。

DEMO

miniSliderというフェードイン・アウトのスライドショーです。

オプションは、まだほとんどありません。
・スライドのアニメーションのスピード
・スライドの時間
・前へ、次へボタンの設置

のみです(笑)

以下jqueryのソースです。

miniSliderの使い方

一応使い方を書いておきます。

内にjqueryと、このjsファイルを読み込みます。

XHTML

<script src="js/jquery.min.js"></script> <script src="js/jquery.minislider.js"></script>

1 2	<script src="js/jquery.min.js"></script> <script src="js/jquery.minislider.js"></script>

そして、以下の記述をします。

<script> $(function() { $(".slider li").miniSlider(); //オプションを設定した場合 $(".slider li").miniSlider({ delay: 5000, slideSpeed: 1000, nextSelector: ".next", prevSelector: ".prev" }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13

<script>   $(function() {         $(".slider li").miniSlider();   //オプションを設定した場合 $(".slider li").miniSlider({ delay: 5000, slideSpeed: 1000, nextSelector: ".next", prevSelector: ".prev" });   });   </script>

HTMLは、

XHTML

<ul class="slider"> <li><img src="sample1.jpg"></li> <li><img src="sample2.jpg"></li> <li><img src="sample3.jpg"></li> <li><img src="sample4.jpg"></li> </ul>

1 2 3 4 5 6

<ul class="slider">          <li><img src="sample1.jpg"></li>             <li><img src="sample2.jpg"></li>             <li><img src="sample3.jpg"></li>             <li><img src="sample4.jpg"></li>         </ul>

cssについては、各々でお願いします。

ちなみに、対応ブラウザについては特に確認をしておりませんので、あしからず。

もっと機能を増やして、ちゃんとしたものを作りたいと思います。