Photo Sliderは多機能ではなくシンプルな命令がいくつか用意されているだけです。Photo Sliderは自動再生機能が用意されており、FOTO.Slider.play()で再生したい領域の<div>タグのID名を指定します(サンプル02)。

サンプル02の実行結果。画像が表示された後、3秒ごと自動的に自動再生される。

最後まで画像が表示されると

最初の画像に戻って繰り返し表示が行なわれる

サンプル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/photoslider.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>Photo Sliderサンプル</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/photoslider.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                FOTO.Slider.baseURL = "./";
                FOTO.Slider.bucket = {
                    "album" : {
                        0 : { "thumb" : "thumb/001.jpg", "main" : "photo/001.jpg" },
                        1 : { "thumb" : "thumb/002.jpg", "main" : "photo/002.jpg" },
                        2 : { "thumb" : "thumb/003.jpg", "main" : "photo/003.jpg" },
                        3 : { "thumb" : "thumb/004.jpg", "main" : "photo/004.jpg" },
                        4 : { "thumb" : "thumb/005.jpg", "main" : "photo/005.jpg" }
                    }
                }
                FOTO.Slider.reload("album");
                FOTO.Slider.preloadImages("album");
                FOTO.Slider.play("album");
            });
        // --></script>
    </head>
    <body>
    <h1>Photo Sliderサンプル</h1>
        <div id="album" class="photoslider"></div>  
    </body>
</html>

自動再生を停止するにはFOTO.Slider.stop()で停止させたい<div>タグのID名を指定します(サンプル03)。

サンプル03の実行結果。自動再生ボタンをクリックすると自動的に画像が切り替わる

停止ボタンをクリックすると自動再生が停止する

サンプル03

<!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/photoslider.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>Photo Sliderサンプル</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/photoslider.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                FOTO.Slider.baseURL = "./";
                FOTO.Slider.bucket = {
                    "album" : {
                        0 : { "thumb" : "thumb/001.jpg", "main" : "photo/001.jpg" },
                        1 : { "thumb" : "thumb/002.jpg", "main" : "photo/002.jpg" },
                        2 : { "thumb" : "thumb/003.jpg", "main" : "photo/003.jpg" },
                        3 : { "thumb" : "thumb/004.jpg", "main" : "photo/004.jpg" },
                        4 : { "thumb" : "thumb/005.jpg", "main" : "photo/005.jpg" }
                    }
                }
                FOTO.Slider.reload("album");
                FOTO.Slider.preloadImages("album");
            });
        // --></script>
    </head>
    <body>
    <h1>Photo Sliderサンプル</h1>
        <div id="album" class="photoslider"></div>
        <form>
            <input type="button" value="自動再生" onClick='FOTO.Slider.play("album")'>
            <input type="button" value="停止" onClick='FOTO.Slider.stop("album")'>
        </form>
    </body>
</html>