prototype.jsでイメージのカルーセルを作成する

prototype.jsでイメージのカルーセルを作成する

• 右にも動かす。

• 二枚づつ動かす？
• コードが不細工なので、もう少しスマートなロジックを考える？
• 画像枚数が多くなってもスムーズに動くか？
• マウスオーバー等で連続して動かす。
• 止めるのは画像クリック？
• デザインをクールにする。
• 最終目標としては、ライブラリ化して、誰でも簡単に使えるようにする。

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 * 80) + 'px'});
	

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

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,
			-80, {
			duration:0.5,
			fps:60,
			delay:0,
			afterFinishInternal: function(effect) {
				//ボタンを押せるようにする
				can_move=true;
			}
			});
		return;
	}


		new Effect.MoveBy("mypiclist",
			0,
			-80, {
			duration:0.5,
			fps:60,
			delay:0,
			beforeStartInternal: function(effect) {
				
				//位置移動
				$("mypiclist").setStyle('left: 0px');
				
				    //先頭の画像を末尾に追加する
					mysrc.push(mysrc[0]);
					//先頭画像を削除
					mysrc.shift();
				    
				    //alert("");
				    //中身を書き換える
				    var strhtml="";
					for (i=0; mysrc.length > i; i++){
						strhtml = strhtml + "<li><img src=\"" + mysrc[i] 
						+ "\" width=\"80\" height=\"60\" style=\"cursor: pointer;\"></li>";
					}
					$("mypiclist").innerHTML=strhtml;


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


}

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


	new Effect.MoveBy("mypiclist",
			0,
			80, {
			duration:0.5,
			fps:60,
			delay:0,
			beforeStartInternal: function(effect) {
				
				//位置移動
				$("mypiclist").setStyle('left: -80px');
				
					//最期の画像を最初に追加する
					mysrc.unshift(mysrc.last());
					//最期の画像を削除
				    mysrc.pop();
				    
				    //alert("");
				    //中身を書き換える
				    var strhtml="";
					for (i=0; mysrc.length > i; i++){
						strhtml = strhtml + "<li><img src=\"" + mysrc[i] 
						+ "\" width=\"80\" height=\"60\" style=\"cursor: pointer;\"></li>";
					}
					$("mypiclist").innerHTML=strhtml;


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

}