さまざまな動きをするjQueryスライダーを作ってみた

サンプルページ

サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。

• サンプルページ
• ダウンロード

HTML

設置したい箇所に以下のように記述します。

<div id="slide01">
  <ul>
    <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img02.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img03.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img04.gif" width="700" height="426" alt=""></a></li>
    <li><a href="#"><img src="img/img05.gif" width="700" height="426" alt=""></a></li>
  </ul>
</div>

divのidやclassはお好みの名前で大丈夫です。そして実行するJSを書きます。便宜上名前をつけようと思って「sliders」としています。

<script>
  $(function(){
    $("#slide01").sliders();
  });
</script>

$(“#slide01”)の部分は先ほどの設置箇所に書いたidを記述します。またここでオプションの設定も出来ます。

<script>
  $(function(){
    $("#slide01").sliders({
      slideType:'selectAnimation',
      changeTime: 1500,
      showTime: 3000,
      allTime: 15000,
      animeType: 'linear'
    });
  });
</script>

CSS

CSSでこのスライダーに関するところをサンプルから抜き出すと以下です。

/*--------------
sliders用
--------------*/
.sliders {
  position: relative;
}

.sliders li {
  overflow: hidden;
  list-style-type: none;
}

.sliders li a img {
  border: 0;
}

.pager {
  padding: 10px 0;
  text-align: center;
}

.pager li {
  display: inline-block;
  *display: inline!important;
  list-style-type: none;
  zoom: 1;
}

.pager a {
  margin: 0 5px;
  display: block;
  width: 10px;
  height: 10px;
  background: url(img/pager_off.png) no-repeat left top;
  text-decoration: none;
  text-indent: -9999px;
  outline: none;
}

.pager a:hover,
.pager .current a {
  color: red;
  text-decoration: none;
  background: url(img/pager_on.png) no-repeat left top;
}

.prev {
  margin-top: -25px;
  margin-left: -450px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(img/prev_off.png) no-repeat left top;
  text-indent: -9999px;
  z-index: 50;
  cursor: pointer;
}

.prev:hover {
  background-image: url(img/prev_on.png);
}

.next {
  margin-top: -25px;
  margin-left: 400px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(img/next_off.png) no-repeat left top;
  text-indent: -9999px;
  z-index: 50;
  cursor: pointer;
}

.next:hover {
  background-image: url(img/next_on.png);
}

基本的には位置調整と、前へ次へボタンの画像設置になります。ここを調整すればオリジナルデザインが反映出来ます。

またIE6でも一応動くようにしているので、少し記述が多いです。サンプルのものは透過pngを使用しているのでそこだけ表示がおかしくなります。

JavaSript

コードを全部記述すると長いのでファイルをご覧ください。

• sliders.js

本当はもっとコードをまとめた方が良いと思いますが、あまりまとめると治すときに分からなくなりそうなので機能毎に分けて
そのままにしてあります。良く言うと使わないコードをサクッと消すことが可能です。