動畫輪播.

var imgs=[
	{"i":0,"img":"images/index/banner_01.jpg"},
	{"i":1,"img":"images/index/banner_02.jpg"},
	{"i":2,"img":"images/index/banner_03.jpg"},
	{"i":3,"img":"images/index/banner_04.jpg"},
	{"i":4,"img":"images/index/banner_05.jpg"},
];

//面向對象   封裝廣告輪播所需的全部屬性和方法
var 	slider={
	LIWIDTH:0,//保存每一個li的寬度
	$parent:null,  //保存輪播的父元素
	$imgs:null,  //保存輪播的ul imgs	元素
	$indexs:null,  //保存輪播的ul  indexs 元素
	DURATION:1000,  //每次輪播的總時間
	WAIT:3000,   //每次自動輪播之間的時間間隔
	timer:null,  //保存自動輪播的定時器序號
	canAuto:true,   //保存是否可啓動自動輪播,使鼠標已進入div就結束動畫
	init:function($parent){  //-------->傳入的是document下的div 須要$ 封裝
		this.$parent=$parent;
		this.$parent.addClass("slider");
		/*
		jq:2步建立	
		*/
		this.$imgs=$("<ul class='imgs'></ul>");
		this.$indexs=$("<ul class='indexs'></ul>");
		this.$parent.append(this.$imgs);
		this.$parent.append(this.$indexs);
		this.LIWIDTH=parseFloat(this.$parent.css("width"));
		this.$imgs.css("width",this.LIWIDTH*imgs.length);
		this.updateView();  //在ul中動態生成元素
		this.myBind();		//綁定全部事件
		this.autoMove();  //一開始就啓動自動輪播
	},
	
	//全部事件的綁定
	myBind:function(){
		//爲$indexs綁定mouseover，只有li能響應事件
		//  $("parent").on("事件名","selector",fn)
		this.$indexs.on("mouseover","li",this,
			function(e){//  e.data-->slider     由於對象on事件綁定的是li
				var $this=$(this);  //this--->當前li  傳入的on事件須要使用的數據e.data=this  
											 // e.data 是on事件 綁定的第三個參數 固定名詞
											//這裏的this 也是指的是 	this.$indexs.on  $index ·前的this  不就是slider
				//若是當前li沒有hover
				if(!$this.hasClass("hover")){
					//用當前li的內容-當前li的兄弟中class爲hover的li的內容，保存在變量n中
					e.data.move(
						$this.html()-$this.siblings("li.hover").html()  
					/*
					上一步得出的結果是  
					經過下標的移動來計算下標的差值
					得出this.move須要的n值
					*/
					);
					//調用this.move(n)
				}
		}); 
		//爲$parent綁定hover事件爲
		//設置進入div  就中止自動輪播,利用中間參數canAuto
		this.$parent.hover(
			function(){
			clearTimeout(this.timer);
			this.timer=null;
			this.canAuto=false;
		}.bind(this),
			function(){
			this.canAuto=true;
			this.autoMove();
		}.bind(this)
		)
	},

	//啓動一次自動輪播
	autoMove:function(){
		/*啓動一次性定時器，設置任務函數爲move，提早綁定this和1，
		設置時間間隔爲WAIT,將序號保存在timer中*/
		this.timer=setTimeout(
			this.move.bind(this,1),this.WAIT
			);	
	},

	//計算目標位置，啓動動畫,n參數表示要移動的個數
	move:function(n){
			//中止$imgs上全部動畫,不會出現動畫疊加的狀況
			this.$imgs.stop(true);
		if(n>0){//左移		
			/* $("...").animate({css屬性: 目標值},speed, easing,callback)*/
			this.$imgs.animate(
				{left:-n*this.LIWIDTH},
				this.DURATION,
				//在動畫結束後修改數組，更新數組
				this.changeImgs.bind(this,n)
				);
			//注意：對於動畫animate，在回調函數中，使用的this對象，就是animate.前的$對象
			//即this.changeImgs---->this--->$imgs
			//而後用bind()綁定,由於bind只能綁定頁面中存在的對象，因此經過bind(this)
			//咱們將this對象改成slider
		}else{//右移
			//先移動數組，更新界面
			this.changeImgs(n);
			//再次啓動動畫
			//由於是向右移動，因此這裏咱們將無論最後其餘img的位置
			//最後顯示的那張img的left 確定是0
			this.$imgs.animate({left:0},this.DURATION);
		}
	},
	
	//修改數組，更新界面
	changeImgs:function(n){
		if(n>0){//左移
		//this--->slider
		//刪除imgs數組開頭的n個元素，在拼接到結尾
		imgs=imgs.concat(imgs.splice(0,n));
		//調用updateView
		this.updateView();//更新頁面
		//$imgs的left歸0
		this.$imgs.css("left",0);
		}else{//右移
			/*******重點*******/
			n*=-1;  //將n變爲正數
			//刪除imgs數組結尾的-n個元素，拼接到數組開頭
			imgs=imgs.splice(imgs.length-(n),n)
								.concat(imgs);
			this.updateView();//更新頁面
			//得到$imgs當前的left值-n*this.LIWIDTH，保存在新的left中
			var left=parseFloat(this.$imgs.css("left"))-n*this.LIWIDTH;
			this.$imgs.css("left",left);
		}
		//調用autoMove再次啓動自動輪播
		if(this.canAuto) //設置自動輪播條件
			this.autoMove();
	},
	//向建立的兩個ul中動態添加內容
	updateView:function(){
		for(var i=0,liImgs="",liIdxs="";i<imgs.length;i++){
			liImgs+="<li><img src='"+imgs[i].img+"'></li>";
			liIdxs+="<li>"+(i+1)+"</li>";
		}
		this.$imgs.html(liImgs);
		this.$indexs.html(liIdxs);
		//下標匹配  當前圖片
		this.$indexs.children("li:eq("+imgs[0].i+")").addClass("hover");
	}
}


//$("#slider").slider();
//向jquery對象的原型中添加slider插件函數
$.fn.slider=function(){
	//最小知道原則  
	//讓slider對象在當前父元素中初始化廣告輪播功能
	slider.init(this);    //this->$("#slider")
}