CrossSlide
画像にスライドショーの効果を実装出来るJavaScript、「CrossSlide」。
使用方法
「jQuery」と、CrossSlideのサイトから「Download minified」か、「Download source」をダウンロードし、スクリプトを読み込みます。
<script type="text/javascript" src="js/cross-slide/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/cross-slide/jquery.cross-slide.min.js"></script> <script type="text/javascript" src="js/cross-slide/crossSlide.js"></script>
スライドショーを表示させたい場所に任意のidを指定します。
JavaScriptがoffの時に表示させる画像を指定しておきます。
<div id="slideshow"> <img src="xxx.jpg" width="xxx" height="xxx" alt="xxx" /> </div>
下記のJavaScriptを「crossSlide.js」の名前で保存します。
「#slideshow」は、上記で指定した任意のid名で、「image01.jpg」~「image04.jpg」は、スライドさせる画像です。
$(function() { $('#slideshow').crossSlide({ sleep: 4, fade: 1 }, [ { src: 'image01.jpg' }, { src: 'image02.jpg' }, { src: 'image03.jpg' }, { src: 'image04.jpg' } ]) });
CSSで画像のサイズを指定します。
div#slideshow { width: xxxpx; height: xxxpx; }
loop: 1でループなしになります。