画像をぐるぐる回って表示のroundaboutプラグイン_技術三昧ブログ

ホーム » ブログ » 画像をぐるぐる回って表示の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:画像ぐるぐる表示するのｊｓコードをhead内で定義

<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", //次へ画像の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人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

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

閉じる

画像をぐるぐる回って表示のroundaboutプラグイン_ブログ_zanmai.net

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