サイト制作に関するメモ書き

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

ループで流れるバナーを実装する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
	});
});
direction 移動方向の指定。’left’か’right’で初期値は’left’。
onmouseStop オンマウス時に移動を停止するかどうか。trueかfalseで初期値はfalse。
speed 移動速度を数値で指定。初期値は3000。

 

“ループで流れるバナーを実装するjQueryプラグインを作ってみた” への2件のフィードバック

  1. regepan より:

    良さそうなんですが、リロードしていると時々chromeがフリーズしますね。
    Mac: El capitan 10.11.6
    Chrome バージョン: 63.0.3239.84(Official Build) (64 ビット)

    • cly7796.net より:

      regepanさん
      ご報告ありがとうございます。
      改良できそうでしたら対応してみます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP