【jQuery】スライドショーするjQueryプラグイン

Tweet

Category JavaScript, jQueryPlugin / Tagged jQuery 2012/01/15

作りました。

名前

ssSlideShow … SlideShowだからss。深い意味はありません。

バージョン

Version: 0.1 … 出来立てです。

ライセンス

自由に使って、改造して、何かあればフィードバックいただければと思います。
表示するなら、パブリックドメインでよいでしょうか。

特徴

• jsファイル単独です。初期状態では画像は不要です。外部スタイルシートも不要です。
• 中央の画像と、その前の画像、次の画像を表示します。左右にずるずると並んでいるように見える表示をします。
• 次へ次へ… 前へ前へ… が、気持ちよく動きます。「次へ」を連打してみてください。

注意

• スライド1枚は幅600px程度の大きめの場合を想定して作られています。表示部分の大きさに対して、スライド1枚が小さいと、あまり具合がよくないかもしれません。
• 画像は最低5枚は欲しいです。画像が少ないと、あまり具合がよくないかもしれません。
• きちんと動作するのはIE7以降です。IE6で正しく動作しません。
• 画像に特化したスライドショーではありません。画像の見せ方にこだわったスライドショーではありません。ある要素の中にある子要素をスライドショーします。各スライドの見せ方は制作者が工夫します。

デモ

ssSlideShow – デモ

ダウンロード

https://github.com/softelcojp/ssslideshow/archive/master.zip

使い方

ダウンロードしたssslideshow.jsを、外部jsとして読み込みます。
既存のjsファイルにコピー＆ペーストして追加しても大丈夫です。

HTMLに、スライドショーさせたい要素の一覧を書きます。

<div id="slides">
  <div><img src="./images/1.jpg" alt=""></div>
  <div><img src="./images/2.jpg" alt=""></div>
  <div style="width:640px; height:480px;background:#999999;">
    <div style="padding:10px;">
      <h2>画像だけではありません</h2>
      <p>
        画像のスライドショーの他、<br>
        文字や通常のHTML（div要素）もスライドショーできます。
      </p>
      <p style="float:right;"><img src="./images/3.jpg" alt=""></p>
    </div>
  </div>
  <div><img src="./images/4.jpg" alt=""></div>
  <div><img src="./images/5.jpg" alt=""></div>
</div>

スライドショーさせます。
スライド1枚の幅、高さと、スライドショーの時間間隔はオプションで指定できます。

<script>
$(function(){
    $("#slides").ssSlideShow({w:640, h:480, d:6000});
});
</script>

以上です。

メモ

要素が少ないときは、事前に2,3倍にして並べておくとよい。4個だったら8個にするなど。
プラグイン側で対応させてもよいし、使う側がそのようにひと手間かけるのもよい。