jQueryプラグインを使わずに自前カルーセルパネルを導入してみる
カルーセルパネル系のjQueryプラグインはかなり数が多いのですが、今回はjQuery本体のみ利用しプラグインを利用せず自作してみます。CSSとJavascriptを数行書き換えるだけで横型、縦型の２つが作れます。
プラグインを使わずにカルーセルパネル 横型
プラグインを使わずにカルーセルパネル 縦型
ではでは横型のカルーセルパネルを作っていきます。まずはHTML、CSSでカルーセルパネルの表示部分をつくります。内容を表示させるボックスを指定して、その中にリスト横並びに並べることにしましょう。両端にはリストを動かすボタン（「id=prev」「id=next」）を置き、これはCSSで配置を制御します。で、できたものは下記↓。
■HTML
<div id="carouselwrap"> <div id="prev" class="hide"></div><div id="next" class="show"></div> <div id="carousel"> <ul> <li><a href="#"><img src="img/1.gif"></a></li> <li><a href="#"><img src="img/2.gif"></a></li> <li><a href="#"><img src="img/3.gif"></a></li> ....... </ul> </div> </div>
■CSS
<style>
* {
margin: 0;
padding: 0;
}
#carouselwrap {
position:relative;
margin:40px auto;
width:900px;
height:155px;
background: #efefef;
}
#carouselwrap #carousel {
position:relative;
width:100%;
height:100%;
overflow: hidden; //はみでた部分を隠す
}
#carouselwrap ul{
list-style-type:none;
}
#carouselwrap ul li {
float:left; // liを横並びにする
width: 270px;
height:100%;
padding-left: 23px;
display:inline;
}
#carouselwrap ul li img {
border:none;
}
#carouselwrap #prev,
#carouselwrap #next {
position: absolute;
top: 0;
width: 20px;
height:100%;
}
#carouselwrap #prev {
left: -20px; //戻るボタンを左端に配置
background-image: url(./img/prev.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#carouselwrap #next {
right: -20px; //進むボタンを右端に配置
background-image: url(./img/next.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
// ボタンがアクティブなときは「show」、使えないときは「hide」
#carouselwrap .show {
cursor: pointer;
background: #FF3399;
}
#carouselwrap .hide {
background: #ccc;
}
</style>
戻る、進むボタンを「carouselwrap(幅900px)」の左右-20pxに配置したので幅940pxのパネルができたことになります。これでHTML、CSSの準備はOKです。
では次にJavascriptでパネルを動くようにしましょう。動作の基本は「戻る、進むボタンでulタグの位置（position leftの値）を変更する」ということです。
Javascript側でやることを簡単にまとめると
・liタグが全部横に並んだときの幅を取得し、ulタグにスタイルを書き込む
・戻る、進むボタンがクリックされたらulのposition leftの値を変更する
の2点です。
あとは動作条件として「ulの右端、左端が表示されたときは各戻る、進むボタンを動作させない」「戻る、進むボタンはスライド中は動作させない」といったものを含めて下記のようなものができあがりました。あとJavascriptが切られている場合はボタンを表示させたくないので、HTML側でボタンの記述は削除し、Javascript側で追加するようにしています。
■Javascript
<script>
$(function(){
// prev,nextをクリックしたときに動かすliの数
var li_move = 3;
// prev,nextを追加
$("#carouselwrap").append('<div id="prev" class="hide"></div><div id="next" class="show"></div>');
// カルーセルパネルの幅を取得
var carousel_wid = $("#carouselwrap").width();
// liのpaddingを含む幅を取得
var li_wid = $("#carousel li").outerWidth();
// liの数を取得
var li_num = $("#carousel li").size();
// ulの幅を計算(liを全部横に並べた幅)
var ul_wid = li_wid*li_num;
// ulにスタイルを追加
$('#carousel ul').css({
position: 'absolute',
top: '0',
left: '0',
width: ul_wid+'px'
});
$('#prev').click(function(){
// prevをクリックしたときにclass=hideが指定されていなければ、以下を実行
if($(this).attr("class") != "hide") {
// ulのpositionを左に動かすアニメーション(:not(:animated)は動いている最中のクリック防止用)
$('#carousel ul:not(:animated)').animate(
{left:'+='+li_wid*li_move},
600,
function(){
// アニメーションが完了したらulのposition-leftの位置を取得
var ul_pos = boxPosition("#carousel ul","left");
// nextのclassを「show」に書き換え
$('#next').attr("class","show");
// ulのposition-leftが0の場合、prevのclassを「hide」に書き換え
if(ul_pos === 0) {
$('#prev').attr("class","hide");
}
}
);
}
});
$('#next').click(function(){
// nextをクリックしたときにclass=hideが指定されていなければ、以下を実行（以下略）
if($(this).attr("class") != "hide") {
$('#carousel ul:not(:animated)').animate(
{left:'-='+li_wid*li_move},
600,
function(){
var ul_pos = boxPosition("#carousel ul","left");
$('#prev').attr("class","show");
if(carousel_wid > (ul_wid+ul_pos)) {
$('#next').attr("class","hide");
}
}
);
}
});
function boxPosition(ele,pos) {
// 指定されたエレメントのpositionの各値を取得
var position = $(ele).position();
// 指定された位置の値をリターン
return position[pos];
}
});
</script>
少し説明を加えると「var li_move = 3」という指定でliタグ何個分の幅をスライドさせるか、という指定をしています。CSSで表示サイズやリストの幅を変更したときに、「var li_move = 1」で1個ずつスライドさせる、「var li_move = 5」で5個スライドさせる、といったことが簡単にできるようになっています。
あとはCSSで表示サイズやデザインを自分のサイトにあうように調整すれば、導入完了です。
縦型のカルーセルパネルについても少し説明すると、横型のカルーセルパネルは各幅を取得していましたが、縦型の場合は高さを取得します。で、その数値を元にulタグのtopの値を変更します。
CSSを縦用のものにし、Javacriptを下記のように書き換えるだけです。
■縦型 CSS
変更した要素のみ抜粋しています。
#carouselwrap {
position:relative;
margin:40px auto;
width:270px;
height:340px;
background: #efefef;
}
#carouselwrap ul li {
width:100%;
height: 155px;
padding-top: 10px;
}
#carouselwrap #prev,
#carouselwrap #next {
position: absolute;
left: 0;
width: 100%;
height:20px;
}
#carouselwrap #prev {
top: -20px;
background-image: url(./img/top.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#carouselwrap #next {
bottom: -20px;
background-image: url(./img/bottom.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
■縦型 Javascript
横型のjavascriptから変更した箇所は「//*****書き換え******//」と書かれた数行です。
<script>
$(function(){
// prev,nextをクリックしたときに動かすliの数
var li_move = 2;
// prev,nextを追加
$("#carouselwrap").append('<div id="prev" class="hide"></div><div id="next" class="show"></div>');
// カルーセルパネルの高さを取得
var carousel_wid = $("#carouselwrap").height(); //*****書き換え******//
// liのpaddingを含む高さを取得
var li_wid = $("#carousel li").outerHeight(); //*****書き換え******//
// liの数を取得
var li_num = $("#carousel li").size();
// ulの高さを計算(liを全部縦に並べた高さ)
var ul_wid = li_wid*li_num;
// ulにスタイルを追加
$('#carousel ul').css({
position: 'absolute',
top: '0',
left: '0',
height: ul_wid+'px' //*****書き換え******//
});
$('#prev').click(function(){
// prevをクリックしたときにclass=hideが指定されていなければ、以下を実行
if($(this).attr("class") != "hide") {
// ulのpositionを左に動かすアニメーション(:not(:animated)は動いている最中のクリック防止用)
$('#carousel ul:not(:animated)').animate(
{top:'+='+li_wid*li_move},
600,
function(){
// アニメーションが完了したらulのposition-topの位置を取得
var ul_pos = boxPosition("#carousel ul","top"); //*****書き換え******//
// nextのclassを「show」に書き換え
$('#next').attr("class","show");
// ulのposition-topが0の場合、prevのclassを「hide」に書き換え
if(ul_pos === 0) {
$('#prev').attr("class","hide");
}
}
);
}
});
$('#next').click(function(){
// nextをクリックしたときにclass=hideが指定されていなければ、以下を実行（以下略）
if($(this).attr("class") != "hide") {
$('#carousel ul:not(:animated)').animate(
{top:'-='+li_wid*li_move},
600,
function(){
var ul_pos = boxPosition("#carousel ul","top"); //*****書き換え******//
$('#prev').attr("class","show");
if(carousel_wid > (ul_wid+ul_pos)) {
$('#next').attr("class","hide");
}
}
);
}
});
function boxPosition(ele,pos) {
// 指定されたエレメントのpositionの各値を取得
var position = $(ele).position();
// 指定された位置の値をリターン
return position[pos];
}
});
</script>
これでトップページのメインビジュアルのスライドとして使う、サイドバーに縦長に置きたい場合も、CSSでサイズ調整すれば、どこでもカルーセルパネルを導入できます。利用する際にはjQuery本体を読み込むのをお忘れなく。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
長くなりましたが、少しJavascriptができれば、横型、縦型のJavascriptを1つにまとめて関数化して使い回しやすくするのも簡単です。Javascript練習中の方は、ぜひ関数化して利用することにもチャレンジして見て下さい。