無限スクロールするアニメーション「infiniteslide.js」サンプル

横方向に無限にスクロールし続けるアニメーションを実装するjqueryプラグインです。
基本的な書式は以下のようになります。
divの中にul>li>imgを入れてください。

更新情報
2013.09.09　jQuery Pauseプラグインを使用してmouse on hoverオプションを追加しました。

サンプルとソースをダウンロード

ブログエントリはこちら

	Javascript

	$(function(){
		$('.infiniteslide1').infiniteslide({
			'height': 400, //高さ
			'speed': 30, //速さ
			'direction' : 'left', //向き
			'pauseonhover': true //マウスオーバーでストップ
		});
	});
	

	HTML
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="infiniteslide.js"></script>
	<script src="jquery.pause.min.js"></script>

	<div class="infiniteslide1">
		<ul>
			<li><img src="img/1.jpg" alt="" /></li>
			<li><img src="img/2.jpg" alt="" /></li>
			<li><img src="img/3.jpg" alt="" /></li>
			<li><img src="img/4.jpg" alt="" /></li>
		</ul>
	</div>

	

	$(function(){
		$('.infiniteslide1').infiniteslide();
	});

	$(function(){
		$('.infiniteslide2').infiniteslide({
			height: 150,
			direction: 'right',
		});
	});

	$(function(){
		$('.infiniteslide3').infiniteslide({
			height: 300,
			speed: 5
		});
	});