ここではjQuery 画像スライドショーを簡単に実装するCameraプラグインの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/camera/

ダウンロードはこちら
http://www.pixedelic.com/plugins/camera/

headで読み込み

<link href="camera/css/camera.css" rel="stylesheet" type="text/css">
<script src="camera/scripts/jquery.min.js"></script>
<script src="camera/scripts/jquery.mobile.customized.min.js"></script>
<script src="camera/scripts/jquery.easing.1.3.js"></script>
<script src="camera/scripts/camera.min.js"></script>

パラメーターの設定

jQuery(function(){
    jQuery('.camera_wrap').camera({
        autoAdvance: true,        // スライド
        fx: 'simpleFade',         // エフェクト
        loader: 'none',           // ローダータイプ
        loaderColor: '#eeeeee',   // 色
        loaderBgColor: '#222222', // 背景色
        loaderOpacity: .5,        // 透明度
        loaderStroke: 5,          // ストローク
        navigation: false,        // ←→画像
        pagination: true,         // ページネーション
        playPause: false,         // 再生停止切り替え
        time: 3000                // 画像切り替え秒数
    });
});

body

<div class="camera_wrap">
    <div data-src="images1.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption1</em>
        </div>
    </div>
    <div data-src="images2.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption2</em>
        </div>
    </div>
    <div data-src="images3.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption3</em>
        </div>
    </div>
    <div data-src="images4.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption4</em>
        </div>
    </div>
</div>

画像の読み込みにはdata-src=”images1.jpg”を指定して
キャプションを表示させる際はclass=”camera_caption fadeFromBottom”で囲んでください。

fx
‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
沢山のエフェクトがあるのでいろいろ試してみてください。