prototype.jsでイメージのスライドショーを作成する(試作版)

VB Tips And Sample（HOME）＞VBプログラマの為のAjax入門

prototype.jsでイメージのスライドショーを作成する(試作版)

prototype.jsでカルーセル（Carousel）を自作してみたくて、試作したもの。
ただ、画像の表示を変えるのは簡単だが、
ぐるぐると永久に回り続けるメリーゴーランドのように画像を連続して、かつ移動表示させるのは面倒しい。
で、
まだ、左にしか動かない。
基本はこのようなものでよいのか？も思案中。
課題としては、

右にも動かす。
画像枚数が多くなってもスムーズに動くか？
マウスオーバー等で連続して動かす。
止めるのは画像クリック？
などなど

もうちょっと頑張れば、私家版カルーセルができそうだ。
二日酔いの為、今回はここまで。

javascript

	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);
		
		//画像枚数によって幅を変える
		$("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 left_move(){
	
		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;
			}
		}); 
	
	
	}

VB Tips And Sample（HOME）＞VBプログラマの為のAjax入門