;(function($){  
  
    $.fn.extend({      
		//将可选择的变量传递给方法
        banner: function(options) {  
            //设置默认值并用逗号隔开
            var defaults = {  
              bannerW:"800px",     //幻灯片的宽度
			  bannerH:"450px",      //幻灯片的高度
			  spanStyle:"active",   //按钮的样式
			  spanTrigger:"click",  //按钮的运动方式
			  moveTime:3000,         //幻灯片运动的时间
			  imgTime:800,          //图片运动的时间
			  moveWay:'easeOutCirc'  //运动的方式
            }  
                  
            var options =  $.extend(defaults, options);  
  
            return this.each(function() {  
                var o = options; 
				var html="";
				var iNow=0;
				var iNow1=0;
				var time=null;
				
				
                //这里编写相应代码
				var _this=$(this);
				var firstLi=_this.find('#bnUl li:first');
				var lastLi=_this.find('#bnUl li:last');
				var len=$(this).find('#bnUl>li').length;
				
				//定义banner的长宽
				_this.css({"width":o.bannerW,"height":o.bannerH});
				var bannerWidth=_this.width();
				
                //定义每张图片的宽度
				_this.find('#bnUl>li').css({"width":bannerWidth+'px',"height":o.bannerH});

				//算出ul的长度
				_this.find('#bnUl').css({"width":len*bannerWidth+"px"});
				
				//创建span按钮 并居中
				for(var i=0;i<len;i++){
					html+="<span></span>";
				}
				_this.find('#cliSpan').html(html);
				//居中
				var spanLeft=(bannerWidth-_this.find('#cliSpan').width())/2;
				_this.find('#cliSpan').css({"left":spanLeft+"px"});
				//第一个span增加颜色
				_this.find('#cliSpan span:first').addClass(o.spanStyle);
				
				//点击span按钮切换开始
				_this.find('#cliSpan span').bind(o.spanTrigger,function(){
					//span按钮切换
					var index=$(this).index();
					$(this).addClass(o.spanStyle).siblings().removeClass(o.spanStyle);
					//图片切换
					iNow=index;
					iNow1=index;
					_this.find('#bnUl').animate({"left":-index*bannerWidth+'px'},o.imgTime,o.moveWay);
				});
				
				//左右按钮移入变亮
				_this.find('div.bannerBut').mouseover(function(){
					$(this).stop().fadeTo(300,1)
				}).mouseout(function(){
					$(this).stop().fadeTo(300,0.4)
				});
				
				//点击左按钮切换
				_this.find('#leftBut').bind("click",function(){
					
					if(iNow==0){
						lastLi.css({"position":"relative","left":-len*bannerWidth+"px"});
						iNow=len-1;
					}else{
						iNow--;
					}
					
					iNow1--;
					
					_this.find('#cliSpan span').eq(iNow).addClass(o.spanStyle).siblings().removeClass(o.spanStyle);
					
					_this.find('#bnUl').animate({"left":-iNow1*bannerWidth+'px'},o.imgTime,o.moveWay,function(){
						if(iNow==len-1){
							lastLi.css({"position":"static"});
							_this.find('#bnUl').css({"left":-(len-1)*bannerWidth+"px"});
							iNow1=len-1;
						}
					});

				});
				
				
				//点击右按钮切换
				_this.find('#rightBut').bind("click",function(){
					bannerImgMove()	
				});
								
				//定时执行切换
				_this.mouseover(function(){
					clearInterval(time);
				}).mouseout(function(){
					starMove();
				});
				starMove();    //执行定时器函数
				
				//定时器函数
				function starMove(){
					time=setInterval(function(){
						bannerImgMove()
					},o.moveTime);
				}
				
				//左右点击运行函数
				function bannerImgMove(){
					if(iNow==len-1){
						firstLi.css({"position":"relative","left":len*bannerWidth+"px"});
						iNow=0;
						}else{
							iNow++;
						}
			
						iNow1++;
						_this.find('#cliSpan span').eq(iNow).addClass(o.spanStyle).siblings().removeClass(o.spanStyle);
						
						_this.find('#bnUl').animate({"left":-iNow1*bannerWidth+'px'},o.imgTime,o.moveWay,function(){
							if(iNow==0){
								firstLi.css({"position":"static"});
								_this.find('#bnUl').css({"left":"0px"});
								iNow1=0;
							}
						});
				}
				
				
            });  
        }  
    });  
      
})(jQuery);