prototype.jsとjQueryでカルーセルを作成する

prototype.jsとjQueryでカルーセルを作成する

• 二枚づつ動かす？
• デザインをクールにする。少しだけ（reflectionを使用してみた。）
• 画像枚数が多くなってもスムーズに動くか？　今１０枚だがこれぐらい大丈夫みたいだ。

• デザインをクールにする。（少しだけ　reflectionを使用してみた。）
• コードが不細工なので、もう少しスマートなロジックを考える？
• マウスオーバー等で連続して動かす。
• 止めるのは画像クリック？
• 最終目標としては、ライブラリ化して、誰でも簡単に使えるようにする。

//jQueryと併用するので最初に実行
jQuery.noConflict();

var mysrc=[];//画像パスが入る配列
var i=0;
var can_move=true;


//ロード時のイベント
Event.observe(document, "dom:loaded", function(){

	//alert("");
	

	
	var myli=$("mypiclist").getElementsByTagName("img");
		
	//alert(myli[0].src);
	for (var i=0; myli.length > i;i++){
		
		mysrc.push(myli[i].src);// 画像パスだけ取得
	
	}
	
	Event.observe($("move_left"), "click", mover_handler);
	
	//Event.observe($("mypiclist"), "click", mover_handler);
	
	Event.observe($("move_right"), "click", m_right_handler);
	
	//画像枚数によって幅を変える
	$("mypiclist").setStyle({width: + (mysrc.length * 90) + 'px'});
	
	//リフレクト効果
	var imglist = jQuery("#mypiclist img");
	imglist.reflect({height:0.4,opacity:0.5});

	//最初に移動させておく
	left_move();

	

	
//alert("");

});

function mover_handler(e){
	//イベント元のアイテム取得
	//var it = e.element();
	
	//二重クリック防止	
	if (can_move == false){
		return;
	}
	can_move=false;

    left_move();   
    
	//alert("");//デバグ用
}

function m_right_handler(e){

	//二重クリック防止	
	if (can_move == false){
		return;
	}
	can_move=false;

    right_move();   

}

//左へ移動
function left_move(){

	//alert($("mypiclist").style.left);
	if ($("mypiclist").style.left =="0px"){
		//右に動いた後、最初の左へは移動のみ
		new Effect.MoveBy("mypiclist",
			0,
			-200, {
			duration:0.5,
			fps:60,
			delay:0,
			afterFinishInternal: function(effect) {
				//ボタンを押せるようにする
				can_move=true;
			}
			});
		return;
	}


		new Effect.MoveBy("mypiclist",
			0,
			-200, {
			duration:0.5,
			fps:60,
			delay:0,
			beforeStartInternal: function(effect) {
				
				//位置移動
				$("mypiclist").setStyle('left: 0px');
				
				//var myli=$("mypiclist").getElementsByTagName("li");

				var myli=$A($("mypiclist").getElementsByTagName("li"));
		
				myli.push(myli[0]);//先頭の画像を末尾に追加する
				myli.shift();//先頭画像を削除
				myli.push(myli[0]);	//先頭の画像を末尾に追加する
				myli.shift();//先頭画像を削除
				
				var strH="";
				
				for (var i=0; myli.length >i;i++){
					strH = strH + "<li>" +myli[i].innerHTML + "</li>";
				}
				
				$("mypiclist").update(strH);
				
				//alert(Prototype.Browser)
				if (Prototype.Browser = "Gecko"){
				//firefoxでは必要　IE8不要
					var imglist = jQuery("#mypiclist img");
					imglist.reflect({height:0.4,opacity:0.5});
				}


			},
			afterFinishInternal: function(effect) {
				//ボタンを押せるようにする
				can_move=true;
			}
		}); 


}

//右へスライド
function right_move(){
	
		//alert($("mypiclist").style.left);
	if ($("mypiclist").style.left =="-200px"){
		//左に動いた後、最初の右へは移動のみ
		new Effect.MoveBy("mypiclist",
			0,
			200, {
			duration:0.5,
			fps:60,
			delay:0,
			afterFinishInternal: function(effect) {
				//ボタンを押せるようにする
				can_move=true;
			}
			});
		return;
	}


	new Effect.MoveBy("mypiclist",
			0,
			180, {
			duration:0.5,
			fps:60,
			delay:0,
			beforeStartInternal: function(effect) {
				
				//位置移動
				$("mypiclist").setStyle('left: -180px');
				
				var myli=$A($("mypiclist").getElementsByTagName("li"));
				
				myli.unshift(myli.last());//最期の画像を最初に追加する
				myli.pop();//最期の画像を削除
				myli.unshift(myli.last());//最期の画像を最初に追加する
				myli.pop();//最期の画像を削除

				var strH="";
				
				for (var i=0; myli.length >i;i++){
					strH = strH + "<li>" +myli[i].innerHTML + "</li>";
				}
				
				$("mypiclist").update(strH);
				
				//alert(Prototype.Browser)
				if (Prototype.Browser = "Gecko"){
				//firefoxでは必要　IE8不要
					var imglist = jQuery("#mypiclist img");
					imglist.reflect({height:0.4,opacity:0.5});
				}
			},
			afterFinishInternal: function(effect) {
				//ボタンを押せるようにする
				can_move=true;
			}
		}); 

}