【jQueryプラグイン】設置が簡単でシンプルなスライドショー

2014/01/25
- jQuery

前回、「自分で作るjQueryスライドショー中級編」という記事を書きましたが、その方法で作成したプラグインです。

フェードイン・フェードアウトで画像が切り替わり、戻るボタンも進むボタンもないシンプルなスライドショーです。

slide_simplefade.jsの動作デモ

画像の追加や表示秒数、フェードの時間などが指定可能です。

slide_simplefade.jsのダウンロード

slide_simplefade.jsのダウンロードはコチラから

slide_simplefade2.zip (2014/01/27)
slide_simplefade1.zip (2014/01/24)

slide_simplefadeの動作イメージ

上の動作サンプルは、画像4枚構成です。
4枚目の次は1枚目に戻り、これを延々と繰り返します。
動作イメージ
imgタグには、「img1」から連番でクラス名を記述します。
※番号が飛ばないように注意してください。

画像を追加した場合の動作イメージ

画像を追加した場合の動作イメージです。
途中に追加することや順番を入れ替えることも可能です。
動作イメージ（画像の追加）
<img src=”slideshow.gif” class=”img1″>
<img src=”content.png” class=”img2″>
<img src=”float_clear” class=”img3″>
<img src=”web-labo.png” class=”img4″>
<img src=”append.jpg” class=”img5“>

準備項目

jQueryの本体をダウンロードして読み込みます。更に、プラグイン用の「slide_simplefade.js」と「slide_simplefade.css」をhead要素内で読み込みます。ファイルの設置場所によりパスは適宜変更してください。同じフォルダ内に設置する場合は、このままで構いません。

<script type="text/javascript" src="jquery-1.10.2.min.js">;</script>
<script type="text/javascript" src="slide_simplefade.js"></script>
<link rel="stylesheet" type="text/css" href="slide_simplefade.css">

※サンプルも含めたslide_simplefade一式のダウンロードはこちら。
※jQueryの本体は、ダウンロードしたファイル名に変更してください。

HTMLを記述する場合の注意点

コンテナ要素に「#slide」とid名を付けてください。要素はpでもdivでも構いませんが、コンテナ要素の中に直接imgを記述してください。

imgタグには必ずclass名を付けます。クラス名は「img+連番」の形式とし、必ず1から開始して連番になるように記述します。画像を順番を入れ替えた場合は、連番を振り直してください。

<p id="slide">
    <img src="slideshow.gif" class="img1">
    <img src="contents.png" class="img2">
    <img src="float_clear.png" class="img3">
    <img src="web-labo.png" class="img4">
</p>

slide_simplefade.js内の設定項目

var interval = 7000;	//インターバル時間
var fadeTime = 2500;	//フェードイン、フェードアウトの時間
var imgNo = 1;		//最初に表示したい画像番号

設定項目は、~~4項目~~ 3項目です。
変数に値を代入することで設定します。

interval: 画像の表示時間です。数値を小さくすると短く、大きくすると長くなります。1000=1秒なので、7000で7秒間の表示になります。
fadeTime: 画像切り替え時、フェードイン・フェードアウトの時間です。数値を小さくすると素早く切り替わり、大きくするとゆっくり切り替わります。表示時間と同様に1000=1秒です。
imgNo: どの画像から開始するか、画像番号を指定します。img1から開始したい場合は1、img3から開始したい場合は3となります。
maxNo: ~~スライドの最後の画像番号を代入します。例えば画像が4枚でimg4が最後であれば4を代入。画像が5枚でimg5が最後であれば5を代入します。~~ ※自動取得にしたので、ver1.1から不要になりました。