ホーム » ブログ » 画像をぐるぐる回って表示のroundaboutプラグイン
このエントリーをはてなブックマークに追加
@2015/01/31
他人作った、画像をぐるぐる回って表示できるjqueryのプラグインです。
ここで自分がカスタマイズして作成したサンプルを掲載します。

DEMO

まず、jquery.roundabout.jsプラグインをダウンロードします。

次は、ダウンロードしたjsとjqueryをhtmlファイルのheadにincludeしてください。
	<head>
	<meta charset="utf-8">
	<title>画像ぐるぐる表示する</title>
	<link rel="stylesheet" href="./css/style2.css">
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="./js/jquery.roundabout.js" type="text/javascript"></script>
	

No3:画像ぐるぐる表示するのjsコードをhead内で定義
<SCRIPT Language="JavaScript">
	<!--
	$(document).ready(function() {
    $('#myRoundabout').roundabout({
        tilt                 : -1, //傾度
        minOpacity           : 0.1, //最小不透明度
        minScale             : 0.1, //最小スケール
        autoplay             : true, //自動再生
        autoplayDuration     : 5000, //自動再生の間隔時間5秒
        autoplayPauseOnHover : true, //ホバー時に自動再生を停止するかどうか
        btnNext: "#btn-next", //次へ画像のID
		btnPrev: "#btn-prev" //前へ画像のID
    });
});
	//-->
</SCRIPT> 

No4: CSSを定義(全てのCSSここに貼り付ける。各自カスタマイズしてください。)
#container {
	width: 960px;
	margin: 0 auto;
	clear: both;
}
.container_round {
	width: 960px;
	background-color: #FFF;
	height: auto;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
ol, ul {
	list-style: none;
}
ul#fontSize {
	*zoom: 1; /*forIE6,7*/
	margin-bottom: 10px;
}
ul#fontSize:after {
	content: "";
	display: block;
	clear: both; 
}
ul#fontSize li {
	background-color: #6CF;
	padding: 10px 15px;
	margin-right: 5px;
	float: left;
	cursor: pointer;
	display: block;
}
ul#fontSize li:hover {
	background-color: #FCF;
}
ul#fontSize li.active {
	background-color: #999;
}
ul#fontSize li.active:hover {
	background-color: #FCF;
}
a {
	color: #000066;
}
/* calrse */
#myRoundabout {padding: 0;}
#myRoundabout ul {
list-style: none;
    margin: 0;
}
#myRoundabout li {
	list-style-type: none;
}
.roundabout-holder {
	list-style: none;
	width: 100%;
	height: 13.5em;
	margin: auto;
}
.roundabout-moveable-item {
height: 12.5em;
width: 86%;
cursor: pointer;
}
.roundabout-moveable-item img {
	height: 12.5em;
	width: 86%;
	border: none;
}
.roundabout-in-focus { cursor: auto; }

#btn-prev,
#btn-next {
	position: absolute;
	width: 75px;
	height: 250px;
	z-index: 100;
}
#btn-prev {
	left: 0;
	top: 0;
}
#btn-next {
	right: 0;
	top: 0;
}

No5: 画像のHTMLコードです。
<body>
<!--zanmai.net 毎日IT技術ブログ掲載---->
<div id="container">
	<div class="container_round">           
		<ul id="myRoundabout">
			<li><a href="http://www.zanmai.net" target="_blank"><img src="image/image1.png" width="750" height="200" alt="テスト画像1" /></a></li>
			<li><a href="http://www.zanmai.net"><img src="image/image2.png" width="750" height="200" alt="テスト画像2" /></a></li>
			<li><a href="http://www.zanmai.net"><img src="image/image3.png" width="750" height="200" alt="テスト画像3" /></a></li>
		</ul>
		<p id="btn-prev"><a href="#" id="img-prev"><img src="image/btn_prev.png" width="75" height="250" alt=""></a></p>
		<p id="btn-next"><a href="#" id="img-next"><img src="image/btn_next.png" width="75" height="250" alt=""></a></p>
	</div>
</div>
</body>

これで、画像をぐるぐる回って表示のコードです。

最後、画像ぐるぐる回るのサンプルと全てのコード:
DEMO
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>画像ぐるぐる回って表示</title>
<link rel="stylesheet" href="./css/style2.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./js/jquery.roundabout.js" type="text/javascript"></script>
<SCRIPT Language="JavaScript">
	<!--
	$(document).ready(function() {
		$('#myRoundabout').roundabout({
			tilt                 : -1,
			minOpacity           : 0.1,
			minScale             : 0.1,
			autoplay             : true,
			autoplayDuration     : 5000,
			autoplayPauseOnHover : true,
			btnNext: "#btn-next",
			btnPrev: "#btn-prev"
		});
	});
	//-->
</SCRIPT> 

</head>
<body>
<!--zanmai.net 毎日IT技術ブログ掲載---->
<div id="container">
	<div class="container_round">           
		<ul id="myRoundabout">
			<li><a href="http://www.zanmai.net" target="_blank"><img src="image/image1.png" width="750" height="200" alt="テスト画像1" /></a></li>
			<li><a href="http://www.zanmai.net"><img src="image/image2.png" width="750" height="200" alt="テスト画像2" /></a></li>
			<li><a href="http://www.zanmai.net"><img src="image/image3.png" width="750" height="200" alt="テスト画像3" /></a></li>
		</ul>
		<p id="btn-prev"><a href="#" id="img-prev"><img src="image/btn_prev.png" width="75" height="250" alt=""></a></p>
		<p id="btn-next"><a href="#" id="img-next"><img src="image/btn_next.png" width="75" height="250" alt=""></a></p>
	</div>
</div>
</body>
</html>


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/229.html

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check