スライド機能について

質問

勉強の為カルーセルを自作しております。
そこで知識のある方に、是非ともお教え頂きたいことがございまして
ご質問させていただきます。

現状私が書いたhtml、css、jsは下記となります。

▼CSS

<style type="text/css">
#Wrap{width:360px; margin:30px auto;}
#Carousel{
width:360px;
height:380px;
padding-top:50px;
padding-bottom:40px;
float:left;
position:relative;
}
#Carousel .Carousel-inner{
height:370px;
overflow:hidden;
}
#Carousel .Carousel-inner ul li{
height:180px;
margin-bottom:10px;
display:block;
}
#btn_up,#btn_down{
position:absolute;
left:165px
}
#btn_up{top:10px;}
#btn_down{bottom:10px;}

▼html

<div id="Wrap" class="clearfix">
<div id="Carousel">
<div class="Carousel-inner">
<div class="CarouselMove">
<ul>
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFE599&text=img1"></a></li>
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/99F8FF&text=img2"></a></li>
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img3"></a></li>
<li><a href="http://www.google.co.jp"><img src="http://placehold.it/360x180/FFC8EC&text=img4"></a></li>
</ul>
</div>
</div>
<a href="#" id="btn_up"><img src="img/up.gif" alt="" width="30" height="30" /></a>
<a href="#" id="btn_down"><img src="img/down.gif" alt="" width="30" height="30" /></a>
</div>

</div>

▼JS

$(function(){

var target = $('#Carousel');
var targetList = target.find('li');
var targetLength = targetList.length;
var showLength = 2;//見えている枚数
var moveLength = 2;//動かす枚数
var itemHeight = targetList.outerHeight(true);//画像一枚の高さ
var moveDistance = itemHeight * moveLength;//一度に動かす量
var moveSpeed = 400;
var easing = 'swing';
var clickFlg = 0;

$('#btn_down').click(function(e){
e.preventDefault();
if(!clickFlg){
clickFlg = 1;
var clone = target.find('li').slice(0,moveLength).clone(true);
clone.appendTo(target.find('li').parent().filter(':last'));
target.find('li:first').stop()
.animate({marginTop : '-=' + moveDistance}, moveSpeed , easing , function(){
target.find('li').slice(0,moveLength).remove();
clickFlg = 0;
});
}else return;
});

});

上記を実行すると問題なく動きます。
ただ、btn_upについてはどのように記述すれば良いかがわからず
教えて頂きたいと思っております。
この考えでダメであれば、代替案をご教示願えれば幸いです。

仕様としましては、今後プラグインにする予定でして、
var showLength = 2;//見えている枚数
var moveLength = 2;//動かす枚数
上記の2点は変更できるようにしたいと思っております。

また、1点現状でも何故こうなるかわからない点がございまして、
var clone = target.find('li').slice(0,moveLength).clone(true);
このtarget.find('li')を変数に格納しているtargetListにすると
動作しなくなってしまいます。何故なのかわからず。。

こちらと併せてご教示いただけませんでしょうか。

お忙しいところ大変恐縮ですが
宜しくお願い致します。

回答No.1

fujillin · ベストアンサー

こんにちは。

＞ただ、btn_upについてはどのように記述すれば良いかがわからず
ほとんど、btn_downの処理と同じではないでしょうか。（方向が逆になるだけ）
簡単に整理すれば
　1）リストの最後から移動コマ分の複製をリストの前に追加
　2）リストの表示位置を調整（追加する前と同じになるように）
　3）リストの表示を移動（アニメーション）
　4）（コールバックで）リストの最後から移動分のリストを削除
みたいな感じ。

＞var clone = target.find('li').slice(0,moveLength).clone(true);
＞このtarget.find('li')を変数に格納しているtargetListにすると
＞動作しなくなってしまいます。
最初にtargetListを定義したときは初期状態の要素構成で定義されています。
その後、アニメーションをするとクローン（初期の要素とは別要素）が追加され、もとからあった要素は削除され、順序も変わってしまいます。
それなので、後からtargetListを参照しても該当する要素がすでになかったり、その時の表示状態とは順序が変わっていたりするのでうまくいかないのではないでしょうか。

カルーセルの方法として、ご提示のように個々のリストをコピーしながら順次入れ替えてゆく方法と、初期設定で表示コマ分だけリストに追加しておいて、後はUL要素全体を移動することで表示位置を変えるだけ（LI要素は入れ替えない）という方法が考えられます。
後者の方法であれば要素が入れ替わることがないので、仮にtargetListを参照しても実際の構成と同じものが得られるはずです。

検索すると、先人たちのサンプルがいろいろ見つかると思いますので、考え方の参考にすると良いのではないでしょうか？
また、上記の両方の方法で作成してみるというのも勉強に役立つかもしれません。

お礼

ご回答いただきありがとうございました！
無事出来ました。本当に感謝しております。
またご相談させていただくかもしれませんが、
宜しくお願い致します。

補足

ご回答本当にどうもありがとうございましました。実際にやってみます！また、やってみて問題なくできれば良いのですが、もしつまづいたらもう一度こちらで質問させて頂きたく、思っております。
ベストアンサーとさせて頂きますが、もう少々お待ちいただければ幸いです。よろしくお願いいたします。