もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

jQueryで自動スクロールするプラグインを作ってみた

jQuery JavaScript

ブログのアクセスログを眺めていたら「jquery 自動スクロール」とか「jquery スクロール 自動」とかでアクセスする人がそれなりにいるので、簡単なプラグインを作ってみました。

コード

https://github.com/rei-m/autoScroller
※ソースコードはgithubから落としてください。

使い方

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>auto scroll sample</title>
<style>
.content {
	font-size:11px;
	width:300px;
}
.content:nth-child(odd){
	background-color:#FFEFD5;
}
.content:nth-child(even){
	background-color: #E0FFFF;
}
</style>
</head>
<body>
<h1>さんぷる</h1>
<div id="scroll">
	<div class="content">
		いっこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		にこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		さんこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		よんこめ<br>
		<br>
		<br>
	</div>

	<div class="content">
		ごこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		ろっこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		ななこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		はっこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		きゅうこめ<br>
		<br>
		<br>
	</div>
	<div class="content">
		じゅっこめ<br>
		<br>
		<br>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../src/autoScroller.js"></script>
<script type="text/javascript">
    $("#scroll").autoScroller({
        wait:3000,
        target:".content",
        display:5
    });
</script>
</body>
</html>

指定可能なオプションは以下の通りです。
wait : スクロールの待ち時間（default:3000）
speed : スクロールのアニメーションスピード（default:500）
target : autoScroller内のスクロールコンテンツのセレクタ（default:div要素を拾います）
display : スクロールで表示するコンテンツ数（default:5）

サンプル


その他

何か不具合・要望等あればこちらにどぞー
https://www.facebook.com/rei.matsushita
https://twitter.com/rei_m