jquery.galleryslider:複数画像をフルスクリーンで縦スライドできるJs
- 2019.07.07
- JavaScript jQuery
- jquery.galleryslider, ギャラリー, 画像スライダー

複数画像を縦列に表示し、マウスカーソルを上下すると画像が上下にスライドします。
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.vaccordion.js:複数のコンテンツエリアをアコーディオン風に表示してくれるJs 2019.07.06
-
次の記事
jquery.sidr:ページ(ブラウザ)の左側からメニューを表示するJs 2019.07.08