jquery.roundabout.js、jquery.roundabout-shapes.js:リストタグの要素を色々な種類の回転方法で表示してみる



リストタグ(li)系のスライダーって結構色々種類がありますが、
このjsで色々な種類の回転表示が可能な様です。

1.CSSの記述例

以下は調整してみて下さい。

<style type="text/css" media="all">
<!--
#sample1{
	padding:100px 0 120px 0;
}
#sample1 ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0px 150px;
	width: 350px;
	height: 100px;
}
#sample1 li {
	height: 100px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample1 li img {
	width: 100%;
}
#sample1 li.roundabout-in-focus {
	cursor: default;
}
#sample2{
	padding:20px 0;
}
#sample2 ul {
	list-style: none;
	padding: 0;
	margin: 50px 0 20px 150px;
	width: 450px;
	height: 100px;
}
#sample2 li {
	height: 100px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample2 li img {
	width: 100%;
}
#sample2 li.roundabout-in-focus {
	cursor: default;
}
#sample3{
	padding:40px 0;
}
#sample3 ul {
	list-style: none;
	padding: 0;
	margin: 50px 0 20px 150px;
	width: 350px;
	height: 250px;
}
#sample3 li {
	height: 200px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample3 li img {
	width: 100%;
}

#sample3 li.roundabout-in-focus {
	cursor: default;
}
-->
</style>

2.読込むJsファイルとJavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.roundabout.js"></script>
<script src="jquery.roundabout-shapes.js"></script>
<script src="jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {
			$('.sample1').roundabout({
				btnNext: ".next",
				btnPrev: ".prev",
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start",
				btnStopAutoplay: ".stop",
				shape: "risingEssence",
			});

			$('.sample2').roundabout({
				btnNext: ".next2",
				btnPrev: ".prev2",
				duration: 2000,
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start2",
				btnStopAutoplay: ".stop2",
				shape: "flurry",
				easing: 'easeOutElastic'
			});

			$('.sample3').roundabout({
				btnNext: ".next3",
				btnPrev: ".prev3",
				duration: 1600,
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start3",
				btnStopAutoplay: ".stop3",
				shape: "rollerCoaster",
				easing: 'easeOutBounce'
			});
});
</script>

3.HTMLの記述例

	<div id="sample1">
			<ul class="sample1">
				<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
			</ul>
	</div>


	<hr />
            
	<div id="sample2">
			<ul class="sample2">
				<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
			</ul>
	</div>

	<hr />

	<div id="sample3">
			<ul class="sample3">
				<li><a href="#"><img src="i1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i4.jpg" alt="" /></a></li>
				<li><a href="#"><img src="i5.jpg" alt="" /></a></li>
			</ul>
	</div>

roundabout-shapes.js、roundabout.js:リストタグの要素を色々な種類の回転方法で表示するデモ

ソース元:
FredHQ – Roundabout for jQuery by Fred LeBlanc
FredHQ – Roundabout Shapes for jQuery & Roundabout by Fred LeBlanc

色んな種類のオプションがあって便利そうですが、
オプションが有り過ぎて結局は自分の今まで使ってた
使い慣れたJsを使用してしまいそう。