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

Javascript

前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。

スライドのパターン

よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。

サンプルページ

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

設置方法

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>

オプション

slideType

スライドのタイプ。以下から選んで下さい。

  • fadeSlide フェードイン
  • leftSlide 左にスライド(終わりまで行くと左へ戻る)デフォルト
  • leftSlideLoop 左にスライド(ループ)
  • leftSlideAnimation 常に左にスライド(ループ)
  • selectAnimation 左にスライド(前へ次への選択ボタンあり)
  • moveOn 現在表示されているものの上に右からスライド
changeTime
次のスライドまでの移動秒数。デフォルトは1500
showTime
表示秒数デフォルトは3000
allTime
leftSlideAnimation 常に左にスライド(ループ)専用の全体にかかる秒数。デフォルトは15000
animeType
アニメーションタイプ。デフォルトはswing。jquery.easing.jsを読みこめばそちらの値も使えます。

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

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

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

スライダーはbxSliderなど配布されていたものを使っていたのですが、やはり自作できるといろいろ改造もできて楽しいですね。

これを応用すればコンテンツスライダーも作れそうです。というわけで自作スライダーの紹介でした。