適当なjQueryライブラリが見つからなかったので、「サムネイル付スライドショー」を自作しました。スクリプトが保持する変数で動作を制御するため、オブジェクト指向のソースコードを作成しています。忘れないうちに記録。

●サムネイル付スライドショーのスクリプト

var Slide = function(index){
  this.index = index;
  this.intvl = 6000;
}
Slide.prototype = {
  loop: function(){
    var myobj = this;

    if(this.tim_obj){
      clearTimeout(this.tim_obj);
    }

    this.screen();
    this.thumbnails();

    var elm = $(".thumb img").length;

    this.crnt_index = this.index;

    this.index++;
    if(this.index == elm){
      this.index = 0;
    }

    this.tim_obj = setTimeout(function(){
      myobj.loop();
    },this.intvl);
  },
  changeImg: function(cl_index){
    this.index = cl_index;
    this.loop();
  },
  screen: function(){
    if(this.crnt_index != null){
      $(".screen img").eq(this.crnt_index).fadeTo("slow",0);
    }
    $(".screen img").eq(this.index).fadeTo("slow",1);
  },
  thumbnails: function(){
    if(this.crnt_index != null){
      $(".thumb img").eq(this.crnt_index).fadeTo("slow",1);
    }
    $(".thumb img").eq(this.index).fadeTo("slow",0.5);
  },
  thumb_onmouse: function(hv_index){
    this.hv_index = hv_index;
    var op = $(".thumb img").eq(this.hv_index).css("opacity");
    if(op == 1){
      $(".thumb img").eq(this.hv_index).fadeTo("normal",0.5);
    }
  },
  thumb_outmouse: function(out_index){
    this.out_index = out_index;
    if(this.out_index != this.crnt_index){
      $(".thumb img").eq(this.out_index).fadeTo("normal",1);
    }
  }
}

$(document).ready(function(){

  $(".screen img").each(function(){
    $(this).css("opacity",0);
  });

  var obj = new Slide(0);
  obj.loop();

  $(".thumb img").click(function(){
    var index = $(".thumb img").index(this);
    obj.changeImg(index);
  });

  $(".thumb img").hover(
    function(){
      var index = $(".thumb img").index(this);
      obj.thumb_onmouse(index);
    },
    function(){
      var index = $(".thumb img").index(this);
      obj.thumb_outmouse(index);
    }
  );
});

●HTMLソース

<div id="slide">
  <div class="screen">
    <img src="img/samp01.jpg" width="400" height="300" />
    <img src="img/samp02.jpg" width="400" height="300" />
    <img src="img/samp03.jpg" width="400" height="300" />
    <img src="img/samp04.jpg" width="400" height="300" />
  </div>
  <div class="thumb clrfix">
    <img src="img/thum01.jpg" width="100" height="75" />
    <img src="img/thum02.jpg" width="100" height="75" />
    <img src="img/thum03.jpg" width="100" height="75" />
    <img src="img/thum04.jpg" width="100" height="75" />
  </div>
</div>

まず、CSSの”opacity”をサポートしていないブラウザを考慮して、メインスクリーンの画像をjQueryのCSS関数で透明に設定。続いて、Slideクラスのオブジェクトを作成し、クラス内のloop()関数を実行。サムネイルをクリックすることで、自由にメインスクリーンの画像を切り替えられるように、同オブジェクトのクラス内関数changeImg()を実行。マウスオーバーでサムネールの透明度を変化させるthumb_onmouse()とthumb_outmouse()。
すべての関数の誤動作を防ぐためにthis.crnt_indexを指標として利用する。

サンプル