デモ:自動再生スクロールスライダー

jQuery toolsによる「自動再生スクロールスライダー」の動作デモです。

サンプルコード

HTMLのサンプル

<!-- "前へ移動" -->
<a class="prev browse left">prev</a>

<!-- スクロールアイテム・ルート -->
<div class="scrollable">   
	<!-- スクロールアイテム・セット -->
	<div class="items">
		<!-- 1-3 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" />
		</div>
		<!-- 4-6 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50d.png" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50e.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50f.png" />
		</div>
	</div>
</div>
<!-- "次へ移動" -->
<a class="next browse right">next</a>

<!-- 自動再生ボタン -->
<div class="btnSet">
	<button type="button" onClick="api.play()">Play</button>
	<button type="button" onClick="api.pause()">Pause</button>
	<button type="button" onClick="api.stop()">Stop</button>
</div>

CSSのサンプル

/* ボタン */
#example .browse{
	display:block;
	float: left;
	width: 30px;
	height: 16px;
	margin-top: 20px;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/tool/ic_arrow.png) no-repeat;
	cursor: pointer;
}
#example .prev{	background-position: 0 0; padding-left: 18px;}
#example .prev:hover{	background-position: 0 -100px;}
#example .next{	background-position: -470px 0; padding-right: 18px;}
#example .next:hover{	background-position: -470px -100px;}
#example .disabled{	background: none; color: #999; cursor: default;}

/* パネルを囲う要素 */
#example .scrollable {
	float: left;
	margin: 0 10px;
	border: solid 1px #999;
	padding: 5px;
	background: #eee;
	position:relative;
	overflow:hidden;
	width: 270px;
	height:56px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
}
#example .scrollable img{
	margin-right: 5px;
	border: solid 2px #eee;
	cursor: pointer;
}
#example .scrollable .items {
	width:20000em;
	position:absolute;
}
#example .items div {
	float:left;
}
#example .btnSet{
	clear: both;
	width: 480px;
	padding: 10px;
}

Javascriptのサンプル

$(function() {
	var root = $(".scrollable").scrollable({
		circular: true
	}).autoscroll({
		autoplay: false
	});
	window.api = root.data("scrollable");
});