jquery.galleryslider：複数画像をフルスクリーンで縦スライドできるJs

複数画像を縦列に表示し、マウスカーソルを上下すると画像が上下にスライドします。

1．CSSの記述例

<style type="text/css">
<!--
*{
	margin:0;
	padding:0;
}
body{
	background:#ffffff;
	height:100%;
	width:100%;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
}
#gallery{
	position:relative;
	margin:0 auto;
	cursor:n-resize;
}
#gallery img {
	width:100%;
	display:block;
}	
#gallery span{
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
	overflow:hidden;
	display:block;
	background:url(img/bg.png) repeat;
}
*html #gallery span {
	display:none;
} /*hide png ie6*/
-->
</style>

2．ヘッダーとJavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleryslider.js"></script>
<script type="text/javascript">  
$().ready(function() {  
$('#gallery').galleryslider({width:"100%", raster:true});  //width in px % or em | raster: true or false
});  
</script>

3．HTMLの記述例

<div id="gallery">
<img src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/05.jpg" alt="">
<img src="img/06.jpg" alt="">
<img src="img/07.jpg" alt="">
<img src="img/08.jpg" alt="">
<img src="img/09.jpg" alt="">
<img src="img/10.jpg" alt="">
</div>

jquery.galleryslider：複数画像をフルスクリーンで縦スライドできるデモページ

ソース元：jQuery Gallery Slider Plugin | Kollermedia.at