Demo & Download

一応ie6とかでも動きます。

DEMO

Download

柔軟性はあまりないですがプラグイン化してみました。

jquery.appleslider.js

必要なプラグイン

クールな動きを実現するために「jquery.easing.js」を使用しています。
以下からダウンロードしてください。

jQuery Easing v1.3

使い方

こんな感じでマークアップします。
リストの数だけボタンを作成してください。
「id=arrow」という画像はボタンを追尾する画像です。

html
<div id="slider">
  <div id="thum">
    <ul>
      <li><img src="img/01.png" width="128" height="128" /></li>
      <li><img src="img/02.png" width="128" height="128" /></li>
      <li><img src="img/03.png" width="128" height="128" /></li>
      <li><img src="img/04.png" width="128" height="128" /></li>
    </ul>
    <ul>
      <li><img src="img/05.png" width="128" height="128" /></li>
      <li><img src="img/06.png" width="128" height="128" /></li>
      <li><img src="img/07.png" width="128" height="128" /></li>
    </ul>
    ....
  </div>
  <ul id="btn">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <img src="img/arrow.png" width="13" height="8" id="arrow" />
</div>

css3を使用していますがこんなかんじにすると、それっぽくなります。

css
#slider {
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 800px;
  margin: 0 auto 15px;
  text-align: center;
  padding: 20px 0px 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-box-shadow: 1px 1px 4px #A6A8AA;
  -moz-box-shadow: 1px 1px 4px #A6A8AA;
}
#slider ul {
  list-style: none;
}
#slider ul li {
  display: inline;
}
#slider #btn {
  padding: 7px 0;
  border-top: solid 1px #C9C9C9;
  border-bottom: solid 1px #EBEBEB;
  background: #DFDFDF;
  background: -moz-linear-gradient(top, #D8D8D8,
    #F2F2F2 5%,
    #F0F0F0 50%,
    #DFDFDF);
  background: -webkit-gradient(linear, left top, left bottom,
    from(#D8D8D8),
    color-stop(0.05, #F2F2F2),
    color-stop(0.5, #F0F0F0),
    to(#DFDFDF));
}
#slider #btn li {
  padding: 0 15px;
}
#slider #btn li a {
  text-decoration: none;
  color: #999;
}
#slider #btn li a:hover {
  color: #333;
}
#slider #btn li.active a {
  color: #333;
  text-shadow: 1px 1px 0px #fff;
}
#slider #thum {
  position:relative;
  height: 160px;
}
#slider #thum ul {
  position: absolute;
  top: 10px;
  left: 0;
}
#slider #thum ul li {
  position: absolute;
}
#slider #arrow {
  position: absolute;
  top: 180px;
  left: 345px;
}

数値はある程度変更できますが、「position」関係の設定は変更したら動かなくなるかもしれません。

あとは必要なjQuery本体など必要なjsを読み込ませて、「appleslider」メソッドを実行してください。

html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.appleslider.js"></script>
<script type="text/javascript">
$(function() {
  $('#slider').appleslider();
});
</script>

オプション設定

スピードとアニメーションするタイミングだけ調節できるようになっております。

javascript
$(function() {
  $('#slider').appleslider({
    speed: 200,
    delay: 300
  });
});