シンプルなスライドショーを簡単に実現できるjQueryプラグイン「jquery.SimpleSlideShow.js」

jQuery

複数枚の画像をフェードイン、フェードアウトしながら繰り返し再生するjQueryプラグイン「jquery.SimpleSlideShow.js」です。Nivo Sliderとか高機能でスゴいプラグインもありますが、簡易なものを実装したいときには設定が複雑だったりCSSの調整が面倒だったり…ということで簡易なものがほしいなぁと。

デモ





使い方

下記のような感じでjQueryとjquery.SimpleSlideShow.jsとCSSを読み込みます。 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.css" />

そして、下記で実行。

JavaScript

$(function() {
  $('.simpleSlideShow').SimpleSlideShow({
    'height' : 600, // ステージの高さ。デフォルトでは1枚目の画像の高さ。
    'width'  : 300, // ステージの横幅。デフォルトでは1枚目の画像の横幅。
    'duration' : 1000, // アニメーションにかかる時間。
    'interval' : 3000  // 次のアニメーションまでのインターバル。
  });
});

HTML

<div class="simpleSlideShow">
  <a href="http://google.com"><img src="/images/img1.jpg" alt="" /></a>
  <img src="/images/img2.jpg" alt="" />
  <img src="/images/img3.jpg" alt="" />
<!-- end .simpleSlideShow --></div>

デフォルトのCSSは.simpleSlideShowで関数が実行されることを想定して設定されています。
画像群は自動的にdiv.simpleSlideShowWrapperで囲まれるので、構文を気にする方はご注意ください。また、デフォルトのCSSの指定でdiv.simpleSlideShowWrapperは中央揃えされます。また、サイズは1枚目の画像のサイズ（引数で設定した場合はそのサイズ）に設定されますので、そちらもご注意を。

ダウンロード

  • ブックマーク
  • Feedly
  • -
    フィード

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

記事一覧