slideViewerには3つのオプションが用意されています。オプションのうち2つはスライドが移動する際の方法と時間を指定するものです(表1)。

表1:easeFuncオプションとeaseTimeオプション

easeFunc 方法(表2の値が指定できる)
easeTime 移動にかかる時間(ミリ秒)

これらのオプションは、slideView()のパラメータに{ オプション名 : 値 }のプロパティリスト形式で指定します。表2ではeaseFuncオプションで利用できる値を示しておきますので、興味のある方はいろいろ試してみると良いでしょう。

サンプル02では、easeFunc(移動方法)にeaseInOutBackを指定し移動にかかる時間を0.5秒にしています。

サンプル02の実行結果

指定した動きと秒数で他の画像に切り替わります

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/slideviewer.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>slideViewerサンプル</title>
        <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
        <script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").slideView({
                    easeFunc: "easeInOutBack",
                    easeTime: 500
                });
            });
        // --></script>
    </head>
    <body>
    <h1>slideViewerサンプル</h1>
        <div id="album" class="svw">
            <ul>
                <li><img src="photo/001.jpg" width="384" height="216" alt="富士山"></li>
                <li><img src="photo/002.jpg" width="384" height="216" alt="夕焼け"></li>
                <li><img src="photo/003.jpg" width="384" height="216" alt="富山湾"></li>
                <li><img src="photo/004.jpg" width="384" height="216" alt="白糸の滝"></li>
                <li><img src="photo/005.jpg" width="384" height="216" alt="高原の朝"></li>
            </ul>
        </div>
    </body>
</html>

表2: easeFuncオプションで利用できる値

easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInoutCirc
easeInElastic easeOutElastic easeInOutElastic
easeInBack easeOutBack easeInOutBack
easeInBounce easeOutBounce easeInOutBounce