※※※URLが変更となりました。
以前のURLはこちら　（http://tam-tam.co.jp/tipsnote/javascript/post3351.html）
ブックマークをされている方はお手数ですが変更をお願いいたします。※※※
　

サムネイルつきのギャラリーで、キャプションつき、
画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。
　

まず、やりたいことをまとめます。

• 指定した時間で、自動的に画像やテキストが切り替わる
• サムネイルをクリックしても切り替わる
• 切り替わるエフェクトはクロスフェード
• 開始場所を指定できる（コメント欄参照ください）

JQueryを使用して、この全てを満たすJavascriptを作ってみました。

イメージとしては以下のようなものです。

【HTMLはこちら】

<!-- images-->
<div class="g-inner clfix">
    <div id="view">
        <p><img src="images/image1.gif" alt="" width="240" height="150"></p>
        <p><img src="images/image2.gif" alt="" width="240" height="150"></p>
        <p><img src="images/image3.gif" alt="" width="240" height="150"></p>
    </div>
    <ul id="caption">
        <li>テキスト1</li>
        <li>テキスト2</li>
        <li>テキスト3</li>
    </ul>
    <ul id="thumbBtn">
        <li><img src="images/image1.gif" alt="" width="40" height="25"></li>
        <li><img src="images/image2.gif" alt="" width="40" height="25"></li>
        <li><img src="images/image3.gif" alt="" width="40" height="25"></li>
    </ul>
</div>
<!--// images-->

＜div id=”view”＞内はメインイメージ、
＜ul id=”caption”＞内はキャプション、
＜ul id=”thumbBtn”＞内はサムネイルボタンです。

現在は3つずつありますが、数は変更できます。
ただ、メインイメージ、キャプション、サムネイルの数が合うように指定してください。
メインイメージを一つ増やしたらキャプション、サムネイルも一つずつ追加が必要です。

【head内はこちら】

//JQuery読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function (){
    //定義
    var active="active",interval=6000;
    var index=0, timerId=null;
    var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");

    tabs.each(function(){$(this).removeClass(active);});
    content.hide();
    cap.hide();
    tabs.eq(0).addClass(active);
    content.eq(0).fadeIn("fast");
    cap.eq(0).fadeIn("fast");

    //サムネイルクリック時
    tabs.click(function(){
        if($(this).hasClass("active")) return;
        if(timerId) clearInterval(timerId),timerId=null;
        change(tabs.index(this));
        setTimer();
        return false;
    });

    //タイマーセット
    setTimer();
    function setTimer(){
        timerId=setTimeout(timeProcess,interval);
        return false;
    }

    function timeProcess(){
        change((index+1)%tabs.length);
        timerId=setTimeout(arguments.callee,interval);
    }

    //サムネイルをクリックした時or指定時間がきた時の画像切り替え
    function change(t_index){
        tabs.eq(index).removeClass(active);
        tabs.eq(t_index).addClass(active);
        //fadeout
        setTimeout(function(){
            content.eq(index).stop(true, true).fadeOut(3000),
            cap.eq(index).stop(true, true).hide()
        ;}, 300);
        //fadein
        setTimeout(function(){
            index=t_index;
            content.eq(index).fadeIn(3000),
            cap.eq(index).fadeIn(3000)
        ;}, 400)
    }
});
</script>

（JQueryは↑段々古くなってしまので、うまくいかないときは新しいものを試してみてください）

var active="active",interval=6000;

というのは

var active=”選択時に付加するクラス名”,interval=切り替え時間;　を、
var tabs=$("#thumbBtn　> li"), content=$("#view > p"), cap=$("#caption > li");
var tabs=$(“サムネイル”), content=$(“メインイメージ”), cap=$(“キャプション”);

を指定してください。

【cssはこちら】

div.g-inner {
    position:relative;
    width:240px;
    height:200px;
}
#view {
    position: absolute;
    width:240px;
    height:150px;
    top:0;
    left:0;
    overflow:hidden;
}
#view p {
    position: absolute;
    width:240px;
    height:150px;
    top:0;
    left:0;
}
#thumbBtn {
    position:absolute;
    top:160px;
    right:0px;
}
#caption {
    position:absolute;
    top:165px;
    left:0px;
}
#thumbBtn li {
    padding: 0 0 0 2px;
    float:left;
    text-align:right;
    width: 45px;
    cursor:pointer;
}
#thumbBtn li img {
    border: solid 1px #ccc;
}
#thumbBtn li.active {
    opacity:0.5;
    filter:alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
}

コンテンツのレイアウト、画像のサイズによってこちらの数値を変えてください。
JSで選択時に付加するクラス名を変更した場合は

thumbBtn li.active

のところも変更します。
現在選択時には半透明になるようになっています。

以上でギャラリーの出来上がりです。
シンプルなので更新がしやすく、JSもカスタマイズ可能です。

＜動作確認済　ブラウザ＞
windows：firefox3～8、IE6～9、chrome
mac：safari3、chrome、firefox3

今回のサンプルのデータはこちらからダウンロードできます　2012.9.14更新
（ライセンスフリー）