jquery.roundabout.js、jquery.roundabout-shapes.jsを使って、リストタグ（li）要素を色々な種類の回転で表示する方法をご紹介します。
リストタグ（li）系のスライダーって結構色々種類がありますが、このjsで色々な種類の回転表示が可能な様です。
リストタグ要素を色々な種類の回転で表示するCSSの記述
※3パターンのリストタグ（#sample1 ul、#sample1 ul li、#sample2 ul、#sample2 ul li、#sample3 ul、#sample3 ul li）要素のCSS記述です。必要に応じて変更して下さい。
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:10px 0;
line-height:1.4em;
text-align:center;
}
.clWrap{
width:800px;
margin:0 auto;
}
hr{
border:none;
border-bottom:solid 1px #333333;
}
#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>
jquery.roundabout.js、jquery.roundabout-shapes.jsを使って、リストタグ（li）要素を色々な種類の回転で表示するJavaScriptの記述
※jquery.min.js、jquery.roundabout.js、jquery.roundabout-shapes.js、jquery.easing.1.3.jsファイルを読み込みます。$(リストタグエリア).roundabout({オプション})で回転エリアに対してオプションを設定します。3パターンのリストタグエリア（.sample1、.sample2、.sample3）を用意して設定しました。
<script src="https://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>
リストタグ要素を色々な種類の回転で表示するHTMLの記述
※回転表示する画像（i1.jpg ～ i5.jpg）と3パターンの画像回転エリア（class=”sample1″、class=”sample2″、class=”sample3″）を用意します。必要に応じて変更して下さい。
<div class="clWrap">
<h1>リストタグの要素を色んな回転方法で表示</h1>
<div align="center" style="margin: 0 0 40px 0;">数字をクリックすると複数画像が回転します。</div>
<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>
</div><!--/clWrap-->
roundabout-shapes.js、roundabout.js：リストタグの要素を色々な種類の回転方法で表示するデモページ
roundabout-shapes.js、roundabout.js：リストタグの要素を色々な種類の回転方法で表示するデモ
ソース元：
FredHQ – Roundabout for jQuery by Fred LeBlanc
FredHQ – Roundabout Shapes for jQuery & Roundabout by Fred LeBlanc
色んなオプションがあって便利そうですが、オプションが有り過ぎて結局は自分の今まで使ってた使い慣れたJsを使用してしまいそうです。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
