スライド表示領域の複数設定と速度設定

Gliderは、スライドの表示切り替え時間を指定できます。速度の指定はnew Glider()の2番目のパラメータに{ duration : 秒数 } として指定します。1を指定すると切り替わるまでに1秒、0.5であれば切り替わるまでに0.5秒になります。デフォルトでは1秒に設定されています。サンプル04では次のスライドに切り替わるまでに2秒の時間を設定しています。

サンプル04の実行結果

スライドする速度が変わっている

Gliderはページ内に複数のスライド表示領域を持つことができます。この場合は、スライド表示領域全体を囲む<div>タグを必要な数だけ記述します。サンプル05では2つのスライド表示領域を作成し、それぞれ異なる速度でスライドが切り替わるように設定しています。

サンプル05の実行結果

上下2つエリアにスライドを表示させている

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>Gliderサンプル</title>
            <link rel="stylesheet" href="css/glider.css" type="text/css">
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/effects.js"></script>
            <script type="text/javascript" src="js/glider.js"></script>
            <script type="text/javascript" charset="utf-8"><!--
                window.onload = function(){
                    new Glider("glider1", { duration:2.0} );
                }
            // --></script>
        </head>
        <body>
        <h1>Gliderサンプル</h1>
        <div id="glider1">
            <div class="controls">
                <a href="#page01">ページ 1</a> | 
                <a href="#page02">ページ 2</a> |
            </div>
            <div class="scroller">
                <div class="content">
                    <div class="section" id="page01">
                        ■ページ 1<br>
                        <p>最初のページです</p>
                    </div>
                    <div class="section" id="page02">
                        ■ページ 2<br>
                        <p>二番目のページです<br>
                        <img src="photo/001.jpg" width="384" height="216">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        </body>
</html>

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <link rel="stylesheet" href="css/glider.css" type="text/css">
            <script type="text/javascript" src="js/prototype.js"></script>
            <script type="text/javascript" src="js/effects.js"></script>
            <script type="text/javascript" src="js/glider.js"></script>
            <script type="text/javascript" charset="utf-8"><!--
                window.onload = function(){
                    new Glider("glider1", { duration:2.0 } );
                    new Glider("glider2", { duration:0.5 } );
                }
            // --></script>
            <title>Gliderサンプル</title>
        </head>
        <body>
        <h1>Gliderサンプル</h1>
        <div id="glider1">
            <div class="controls">
                <a href="#sec1_page01">ページ 1/1</a> | 
                <a href="#sec1_page02">ページ 2/1</a> |
            </div>
            <div class="scroller">
                <div class="content">
                    <div class="section" id="sec1_page01">
                        ■1章のページ 1<br>
                        <p>最初のページです</p>
                    </div>
                    <div class="section" id="sec1_page02">
                        ■1章のページ 2<br>
                        <p>二番目のページです<br>
                        <img src="photo/001.jpg" width="384" height="216">
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="glider2">
            <div class="controls">
                <a href="#sec2_page01">ページ 1/2</a> | 
                <a href="#sec2_page02">ページ 2/2</a> |
            </div>
            <div class="scroller">
                <div class="content">
                    <div class="section" id="sec2_page01">
                        ■2章のページ 1<br>
                        <p>最初のページです</p>
                    </div>
                    <div class="section" id="sec2_page02">
                        ■2章のページ 2<br>
                        <p>二番目のページです<br>
                        <img src="photo/002.jpg" width="384" height="216">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        </body>
</html>