複数画像を縦列に表示し、マウスカーソルを上下すると画像が上下にスライドします。
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>
