var mImageTrans;
$(document).ready(function(e) {
    var imgList = [ {
        imgName:"Jquery类测试1",
        imgPath:"http://www.pengyaou.com/Images/FileImage/Images/jq20140702.jpg"
    }, {
        imgName:"Jquery类测试2",
        imgPath:"http://www.pengyaou.com/LegendsZ/Images/FileImage/Mycode20140707.jpg"
    }, {
        imgName:"Jquery类测试3",
        imgPath:"http://www.pengyaou.com/Images/FileImage/Images/jq20140702.jpg"
    }, {
        imgName:"Jquery类测试4",
        imgPath:"http://http://www.pengyaou.com/Images/FileImage/Images/vs.jpg"
    }, {
        imgName:"Jquery类测试5",
        imgPath:"http://www.pengyaou.com/LegendsZ/Images/Main/1.jpg"
    }, {
        imgName:"Jquery类测试6",
        imgPath:"http://www.pengyaou.com/Images/FileImage/Images/jq20140702.jpg"
    } ];
     mImageTrans = new $.ImageTransition();
    $(document.body).append(mImageTrans.Play(imgList));
	
    
	
});

(function($) {
    $.ImageTransition = function() {
        this.duration = 500;
        this.imgBoxWidth = 500;
        this.imgBoxHeight = 300;
		var maxLength=0;
		var index=0;
        this.Play = function(imgJson) {
			maxLength=imgJson.length;
			var mainHeight=this.imgBoxHeight*imgJson.length "px";
			var htmlString="<div id="Box" style="height:" this.imgBoxHeight "px" ";width:600px;overflow:hidden;">";
            htmlString  = "<div id="imgMain" style="height:" mainHeight ";width:600px;overflow:hidden;">";
            for (var i = 0; i < imgJson.length; i  ) {
              htmlString  ="<div style="height:" this.imgBoxHeight "px" ";width:600px;">";
              htmlString  = "<img class="imgItem" style="height:" this.imgBoxHeight "px" ";width:600px;" src=""   imgJson[i].imgPath   ""/ title=""   imgJson[i].imgName   "">";
              htmlString  ="</div>";
            }
            return htmlString;
        };
		this.Up=function(){
			if(index==(maxLength-1)){
				alert("已到最后");
				return;
			}
			var marginTop=(index 1)*this.imgBoxHeight;
			$("#imgMain").animate({marginTop:-marginTop "px"},500,function(){index  ;});
		}
		this.Down=function(){
			index--;
			if(index==-1){
				index=0;
				alert("已到最前");
				return;
			}
			var marginTop=(index)*this.imgBoxHeight;
			$("#imgMain").animate({marginTop:marginTop "px"},500,function(){});
		}
    };
})(jQuery);