bgExchanger

bgExchangerは、背景画像を利用したスライドショーライブラリです。

jQueryjQuery.backgroundPositionプラグインが必要です。

ダウンロード

フルセットダウンロード

current version: 0.4
License: MIT License.

メソッド

.bgExchanger( image, count [, options] )

image: String
画像のURLを指定
count: Number
連番の最大値
options: Object
オプション
例:
.bgExchanger( "image.jpg", 5, {loop: true} );
.bgExchanger( "image.jpg", 3, {effect:["fade"]} );

画像のファイル名の後ろに1から連番をつけて、画像ファイル名とします。

以下の2つが同等です。
.bgExchanger( "image.jpg", 3 );
.bgExchanger( ["image1.jpg", "image2.jpg", "image3.jpg"] );

.bgExchanger( images [, options] )

images: Array
画像または色の配列
options: Object
オプション
例:
.bgExchanger( ["red.jpg", "blue.jpg"], {loop: true} );
.bgExchanger( ["image1.png", "image2.png", "image3.png"], {effect:["wipeup"]} );

第一引数の配列に色を指定すると、背景色を変更します。
色の指定は16進数(#000000)、またはRGB(rgb(0,0,0))、RGBA(rgba(0,0,0,0))を使用できます。

$("selector")
	.bgExchanger(["#FFFFFF", "#FF0000", "#FF00FF"]);

オプション

effect: String || Array
"fade", "slideup", "slidedown", "slideright", "slideleft", "wipeup", "wipedown", "wiperight", "wipeleft"のいずれか。
デフォルト: ["fade"]
duration: Number
イフェクトの効果時間、1以上、単位ミリ秒。
デフォルト: 1000
delay: Number
次の変更イフェクト開始までのインターバル。
デフォルト: 4000
loop: Boolean
繰り返し指定。
デフォルト: true
size: false || String
"contain", "cover", "auto"
ボックスサイズに合わせて画像のリサイズを行う。
デフォルト: false
showFirstItem: Boolean
1つめの画像を表示するかどうかの指定。
デフォルト: true

サンプル

durationms ms

delay ms

CODE