ループで流れるバナーを実装するjQueryプラグインを作ってみた

ループで流れるバナーを実装するプラグイン「infiniteFlow.js」を作りました。
移動方向とスピードの設定、オンマウス時に停止するかどうか、画面サイズの変更に対応しています。
「infiniteFlow.js」のデモページはこちら
「infiniteFlow.js」のダウンロード

設定方法

jQueryとstonewall.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="infiniteFlow.js"></script>

HTML

<div id="sample01">
	<ul>
		<li><img src="./img/img01.jpg" width="200" height="140" /></li>
		<li><img src="./img/img02.jpg" width="200" height="140" /></li>
		<li><img src="./img/img03.jpg" width="200" height="140" /></li>
		<li><img src="./img/img04.jpg" width="200" height="140" /></li>
		<li><img src="./img/img05.jpg" width="200" height="140" /></li>
	</ul>
</div>

CSS

#sample01 ul {
	width: 1050px; /* バナー1つの幅 210px × バナーの初期個数 5 */
}
#sample01 ul li {
	float: left;
	margin-right: 10px; /* バナー間に余白を取る場合は指定 */
}

CSSは特にしていなくても大丈夫です。
上記はJavaScriptオフ時にレイアウトが崩れないための指定になります。

JavaScript

$(function(){
	$("#sample01").infiniteFlow();
});

オプション

$(function(){
	$("#sample01").infiniteFlow({
		direction: 'right',
		onmouseStop: true,
		speed: 6000
	});
});