liタグ要素を色々な種類の回転で表示する方法【jquery.roundabout.js、jquery.roundabout-shapes.js】

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アナリティクスタグは流用しないで下さい。

ディスプレイ広告

ディスプレイ広告