画像にスライドショーの効果を実装出来るJavaScript、「CrossSlide」。

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;
}