すてきなスライドショーです→nivo-slider
IE6非対応なのでそれだけ注意。
ノーマルな使い方は上記配布サイトの説明通りにすればOK。
サムネイル方式にするのに少しハマったのでメモ。
サムネイル画像は名前を『元ファイル名_thumb.jpg』として同ディレクトリに配置。
配布のJS/CSSはいじらずそのまま使う。
Header
<script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”><!–mce:0–></script>
<script type=”text/javascript”><!–mce:1–></script>
BODY
<div id=”slider”>
<img src=”images/pic_01.jpg” />
<img src=”images/pic_02.jpg” />
<img src=”images/pic_03.jpg” />
<img src=”images/pic_04.jpg” />
</div>
CSS (Demoから引用)
#slider { position:relative; width:600px; /* Change this to your images width */ height:450px; /* Change this to your images height */ background: url(images/loader.gif) no-repeat 50% 50%; margin-top:30px; margin-bottom:160px; margin-left:70px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } #slider .nivo-controlNav { position:absolute; bottom:-70px; } #slider .nivo-controlNav a { display:inline !important; /* Unhide the thumbnails */ } #slider .nivo-controlNav img { display:inline !important; /* Unhide the thumbnails */ margin-right:10px; } .nivoSlider { -moz-box-shadow:0px 0px 5px #333; -webkit-box-shadow:0px 0px 5px #333; box-shadow:0px 0px 5px #333; } .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .nivoSlider a { border:0; display:block; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } #slider { margin-bottom:110px; } #slider .nivo-controlNav { position:absolute; bottom:-70px; } #slider .nivo-controlNav a { display:inline; } #slider .nivo-controlNav img { display:inline; position:relative; margin-right:10px; -moz-box-shadow:0px 0px 5px #333; -webkit-box-shadow:0px 0px 5px #333; box-shadow:0px 0px 5px #333; } #slider .nivo-controlNav a.active img { border:1px solid #000; } /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both; } .pointer { cursor:pointer; } /* Sharper Thumbnails */ img { -ms-interpolation-mode:bicubic; }