ウェブ学のすすめ

Study of Web Design & Programing

jQueryとCSS3でで作る横スライド「RotateImageMenu.js」

jQuery

プレビュー

↓別ウィンドウを開いて見る
jQueryとCSS3で横スライド「Rotating Image Slider with jQuery」

ポイント

RotateImageMenu.js

Rotating Image Slider with jQuery | Codrops

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryとCSS3で横スライド「Rotating Image Slider with jQuery」</title>
<link rel="stylesheet"  href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/jquery.transform-0.9.3.min_.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.RotateImageMenu.js"></script>
</head>
<body>
<div class="content">
<h1>Rotating Image Slider</h1>
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/01.jpg"></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/02.jpg"></li>
<li data-images="rm_container_3" data-rotation="5"><img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/03.jpg"></li>
<li data-images="rm_container_4" data-rotation="15"><img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/04.jpg"></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Fireworks 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/01.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/05.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/06.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/07.jpg">
</div>
<div id="rm_container_2">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/02.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/08.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/09.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/10.jpg">
</div>
<div id="rm_container_3">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/03.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/11.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/12.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/13.jpg">
</div>
<div id="rm_container_4">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/04.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/14.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/15.jpg">
<img src="http://webgaku.hotcom-web.com/images/rotating-image-slider/16.jpg">
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play（※音が鳴ります）</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { 
    border:0;
}

body{
	background:#333;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:16px;
}
a{
	color:#fff;
	text-decoration:none;
}
h1{
	padding:10px;
	margin:20px;
	font-size:40px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #eee;
	color:#fff;
	background:transparent url(http://jsrun.it/assets/4/R/R/K/4RRKd.png) repeat-x bottom left;
}
.rm_wrapper{
	width:1160px;
	margin:0 auto;
	position:relative;
}
.rm_container{
	width:1050px;
	overflow:hidden;
	position:relative;
	height:530px;
	margin:0 auto;
}
.rm_container h2{
	background:transparent url(http://jsrun.it/assets/a/Q/V/d/aQVd9.png) repeat top left;
	padding:10px 30px;
	position:absolute;
	bottom:170px;
	right:0px;
	color:#f60;
	font-size:36px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}
.rm_container ul{
	width:1170px;
}
.rm_container ul li{
	float:left;
	margin-left:-80px;
	position:relative;
	overflow:hidden;
	width:310px;
	height:465px;
	border:30px solid #333;
	border-width:50px 30px 0 30px;
	background-color:#333;
}

.rm_container ul li img{
	position:absolute;
	top:0px;
	left:0px;
}
.rm_mask_right, .rm_mask_left{
	position: absolute;
	height: 110px;
	background: #333;
	width: 530px;
	bottom: -30px;
	left: 0px;
	-moz-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
	transform:rotate(-3deg);
}
.rm_mask_right{
	left:auto;
	right:0px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	transform:rotate(3deg);
}