jQueryでカルーセルパネル

カルーセルパネルというのは、右左を行ったりきたりするような動きではなく、右に行って行き止まりだったら、くるっと左へ移動するようなパネルのことです。

サイズ80×60の画像を6枚（2枚×3セットになるように）用意しました。

右矢印のみのカルーセルパネル

手始めに右のボタンだけ配置したものを作ってみましょう。上の画像の矢印の挙動を描きます。

<div id="z1"><!--relative指定のためにやむなく作ったdiv-->
    <div id="z2"><img src="../gif/migi.gif" alt="" /></div>
    <div id="z3"><!--紙芝居で言う枠の部分-->
        <div id="z4" class="clearfix"><!--枠からはみ出て画像が表示されるエリア-->
        <ul class="z5 clearfix">
        <li><img src="../gif/r1m.gif" alt="" /></li>
        <li><img src="../gif/r2m.gif" alt="" /></li>
        </ul>
        <ul class="z5 clearfix">
        <li><img src="../gif/r3m.gif" alt="" /></li>
        <li><img src="../gif/r4m.gif" alt="" /></li>
        </ul>
        <ul class="z5 clearfix">
        <li><img src="../gif/r5m.gif" alt="" /></li>
        <li><img src="../gif/r6m.gif" alt="" /></li>
        </ul>
        </div>
    </div>
</div>

HTMLからいきますと、一番外枠z1は右矢印をpositionで指定したかったから作ったdivで、ここにrelativeを指定しておけばそこを基点に自由に配置できますからね。

z2は画像をくくるdiv。imgはインライン要素なので、ブロックレベルのdivで囲む。

z3は枠の部分で幅高さはz1の100％に指定、z4ははみ出して表示される部分、z5は2枚単位で画像を動かすので、2枚ずつリストを作成する。そしてCSS。

/*cssの記述*/
#z1 {
	width:160px;
	height:auto;
	margin-left:25px;
	position:relative;
	}
#z2 {
	position:absolute;
	top:20px;
	left:160px;
	cursor:pointer;
	}
#z3 {
	width:100%;
	height:100%;
	overflow:hidden;
	}
#z4 {
	width:480px;
	height:100%;
	}
ul.z5 {
	float:left;
	width:160px;
	list-style-type:none;
	}
ul.z5 li {
	float:left;
	}

z1は便宜上あるだけだから飛ばし、z2は矢印を絶対配置する場所を示し、z3は枠の部分だから、width:80×2pxで指定して、指定したwidthからはみ出た部分はoverflow:hiddenで隠す。

z4はhiddenで見えない領域を含めた幅なので、80×6枚で480pxとして指定、z5は2枚ずつのliをfloatを使って横並びにしたulをさらにfloatして6枚を横一列に並べる。

floatした親の要素にclearfixを指定して回り込みを解除して、overflowをvisibleにして表示させてみると、

のように配置されているはず。

これにjQueryの命令を適用します。

//jsの記述
$(function(){
	$("#z2").click(function(){
	$("#z2").hide();
	$("#z4").animate({marginLeft:parseInt($("#z4").css("marginLeft"))-160+"px"},"slow","swing",
function(){
	$("ul.z5:first").appendTo("#z4");
	$("#z4").css("marginLeft","0px");
	$("#z2").show();
	});
	});
});

訳）右矢印ボタンがクリックされると、一旦矢印ボタンを見えなくして、カルーセルで画像が横並びになっているエリアの左マージン（現在値は0）を取得「$("#z4").css("marginLeft")」して、parseIntで数値化「parseInt($("#z4").css("marginLeft"))」後、-160してそれを新しいmarginleftとし、アニメーションで表示させます。それが終わったら、コールバック関数で、先頭のul要素を最後方へ移動すると左にずれるところすかさずmarginを0に戻して画像の動きを抑えて、矢印ボタンを表示します。

:firstや:lastは擬似クラスではなく、jQuery独自のフィルターと呼ばれるものです。:firstは、全てのclassがz5のulの中で最初に出てくる要素を指定します。ul.z5:first-childにしても同じ挙動を示します。

左右矢印のカルーセルパネル

これに、左ボタンも追加して右回りも左回りもできるようにしていきます。

HTMLに以下の2行を継ぎ足し、それに対してスタイルを指定しておきます。

<div id="z1a">
    <div id="z6a"><img src="../gif/178.gif" alt="" /></div>
    <div id="z2a"><img src="../gif/migi.gif" alt="" /></div>
    <div id="z7a">><img src="../gif/hidari.gif" alt="" /></div>
    <div id="z3a">
        <div id="z4a" class="clearfix">
        <ul class="z5a clearfix">
        <li><img src="../gif/r1m.gif" alt="" /></li>
        <li><img src="../gif/r2m.gif" alt="" /></li>
        </ul>
        <ul class="z5a clearfix">
        <li><img src="../gif/r3m.gif" alt="" /></li>
        <li><img src="../gif/r4m.gif" alt="" /></li>
        </ul>
        <ul class="z5a clearfix">
        <li><img src="../gif/r5m.gif" alt="" /></li>
        <li><img src="../gif/r6m.gif" alt="" /></li>
        </ul>
        </div>
    </div>
</div>

#z6a {
	position:absolute;
	top:-20px;
	left:-10px;
	}
#z7a {
	position:absolute;
	top:20px;
	left:-25px;
	cursor:pointer;
	}

左矢印ボタンを絶対配置で配置後、上の図のように右と左に画像がある状態であれば、すんなり左右にアニメーションできますが、初期の状態では左に移動対象のパネルがないので、jQueryで予め移動させておくところから開始します。

ここで使用するprependTo()は、指定したセレクターを（）内の要素の前に移動させるjQueryの命令で、先頭に移動したulパネルはマイナスマージンの位置に移動するのではなく、移動後マージンは初期位置（図では0の位置）に戻ります。

そのため、右矢印だけのメニューの時もそうでしたが、prependToやappendTo移動のあとに枠内表示を維持するなら、移動後にマージンで移動させてあげなければなりません。

矢印（z66が左、z67が右）をアニメーションの前にその都度消しているので、div#z64:not(animated)とする必要はありません。消さないならつけましょう。

//jsの記述
$(function(){
	$("ul.z5a:last").prependTo("#z4a");
	$("#z4a").css("marginLeft","-160px"); //ここまでが初期配置設定
//左ボタン
	$("#z7a").click(function(){
		$("#z2a,#z7a").hide();
		$("#z4a").animate({marginLeft:parseInt($("#z4a").css("marginLeft"))+160+"px"},"slow","swing",
		function(){
			$("#z4a").css("marginLeft","-160px");
			$("ul.z5a:last").prependTo("#z4a");
			$("#z2a,#z7a").show();
		});
	});
//右ボタン
	$("#z2a").click(function(){
		$("#z2a,#z7a").hide();
		$("#z4a").animate({marginLeft:parseInt($("#z4a").css("marginLeft"))-160+"px"},"slow","swing",
		function(){
			$("#z4a").css("marginLeft","-160px");
			$("ul.z5a:first").appendTo("#z4a");
			$("#z2a,#z7a").show();
		});
	});
});

これにもし背景の枠を付けたいのであれば、ボタンより前に絶対配置するか、relativeを指定した一番外側のz68の背景imgとして指定します。（例は絶対配置を使用しました）

わかりやすくoverflowを適用しないと下記のようになります。

overflowで見えなくすると、以下。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>