;(function($){
	
	$.fn.lubo=function(options){
		
		// var defaults={

		// }
	
		// //通过覆盖来传参数
		// var options=$.extend(defaults,options);
		
		return this.each(function(){

			var _lubo=jquery('.lubo');

			var _box=jquery('.lubo_box');

			var _this=jquery(this); // 

			var lubohei=_box.height();

			var over='mouseover';

			var out='mouseout';

			var click='click';

			var li="li";

			var _cirbox='.cir_box';

			var ciron='cir_on';

			var _ciron='.cir_on';

			var cirlen=_box.children(li).length; //圆点的数量  图片的数量

			var lubotime=4000; //轮播时间

			var switchtime=600;//图片切换时间

			cir();

			btn();

		//根据图片的数量来生成圆点

			function cir(){

				_lubo.append('<ul class="cir_box"></ul>');

				var cir_box=jquery('.cir_box');

				for(var i=0; i<cirlen;i++){

					cir_box.append('<li style="" value="'+i+'"></li>');
				}

				var cir_dss=cir_box.width();

				cir_box.css({

					left:'50%',

					marginleft:-cir_dss/2,

					bottom:'10%' 

				});

				cir_box.children(li).eq(0).addclass(ciron);

			}

		//生成左右按钮

			function btn(){

				_lubo.append('<div class="lubo_btn"></div>');

				var _btn=jquery('.lubo_btn');

				_btn.append('<div class="left_btn"><</div><div class="right_btn">></div>');

				var leftbtn=jquery('.left_btn');

				var rightbtn=jquery('.right_btn');

			//点击左面按钮

				leftbtn.bind(click,function(){

				var cir_box=jquery(_cirbox);

			 	var onlen=jquery(_ciron).val();	

				_box.children(li).eq(onlen).stop(false,false).animate({

					opacity:0

				},switchtime);

				if(onlen==0){

			 		onlen=cirlen;

			 	}

				_box.children(li).eq(onlen-1).stop(false,false).animate({

					opacity:1

				 },switchtime);
				
				cir_box.children(li).eq(onlen-1).addclass(ciron).siblings().removeclass(ciron);

				})

			//点击右面按钮

				rightbtn.bind(click,function(){

				var cir_box=jquery(_cirbox);

			 	var onlen=jquery(_ciron).val();	

				_box.children(li).eq(onlen).stop(false,false).animate({

					opacity:0

				},switchtime);

				if(onlen==cirlen-1){

				 		onlen=-1;

				 	}

				_box.children(li).eq(onlen+1).stop(false,false).animate({

					opacity:1

				 },switchtime);
				
				cir_box.children(li).eq(onlen+1).addclass(ciron).siblings().removeclass(ciron);

				})
			}

		//定时器

			 int=setinterval(clock,lubotime);

			 function clock(){

			 	var cir_box=jquery(_cirbox);

			 	var onlen=jquery(_ciron).val();	

				_box.children(li).eq(onlen).stop(false,false).animate({

					opacity:0

				},switchtime);

				if(onlen==cirlen-1){

				 		onlen=-1;

				 	}

				_box.children(li).eq(onlen+1).stop(false,false).animate({

					opacity:1

				 },switchtime);
				
				cir_box.children(li).eq(onlen+1).addclass(ciron).siblings().removeclass(ciron);
			 	
			 }

		// 鼠标在图片上 关闭定时器
			
			_lubo.bind(over,function(){

				cleartimeout(int);

			});

			_lubo.bind(out,function(){

				int=setinterval(clock,lubotime);

			});

		//鼠标划过圆点 切换图片

			jquery(_cirbox).children(li).bind(over,function(){

				var inde = jquery(this).index();

				jquery(this).addclass(ciron).siblings().removeclass(ciron);

				_box.children(li).stop(false,false).animate({

					opacity:0

				},switchtime);

				_box.children(li).eq(inde).stop(false,false).animate({

					opacity:1

				},switchtime);

			});


		});

	}
	
})(jquery);


/*调用*/

// <script type="text/javascript">

// $(function(){

//     $(".lubo").lubo({

//     });

// })

// </script>



/*css样式*/

// <style type="text/css">
//   *{ margin:0; padding:0; }
//   img{ display: block; border:none;}
//   ul,li{ list-style: none;}
//   .lubo{ width: 100%;clear: both; position: relative; height:368px;}
//   .lubo_box{ position: relative; width: 100%; height:368px; }
//   .lubo_box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:368px; opacity: 0;filter:alpha(opacity=0);}
//   .lubo_box li img{ width: 100%; height: 368px;}

//   /*圆点*/
//   .cir_box{ overflow: hidden; position: absolute; z-index: 100;}
//   .cir_box li{ float: left; width: 30px; height: 5px; margin:0 5px; cursor: pointer; background: #fff; opacity: 0.8;filter:alpha(opacity=80);}
//   .cir_on{ background: #000 !important;}

//   /*按钮*/
//   .lubo_btn{ position: absolute; width: 100%; top: 140px;}
//   .left_btn, .right_btn{ width: 30px; height: 80px; background: #000;opacity: 0.8;filter:alpha(opacity=80); cursor: pointer; color: #fff; line-height: 80px; font-size: 30px; text-align: center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
//   .left_btn{ float: left;}
//   .right_btn{ float: right;}
// </style>

/*html*/
// <div class="lubo">
//   <ul class="lubo_box">
//     <li style=" opacity: 1;filter:alpha(opacity=100);"><a href=""><img src="1.jpeg"></a></li>
//     <li><a href=""><img src="2.jpeg"></a></li>
//     <li><a href=""><img src="3.jpeg"></a></li>
//     <li><a href=""><img src="4.jpeg"></a></li>
//     <li><a href=""><img src="5.jpeg"></a></li>
//     <li><a href=""><img src="2.jpeg"></a></li>
//     <li><a href=""><img src="3.jpeg"></a></li>
//     <li><a href=""><img src="4.jpeg"></a></li>
//     <li><a href=""><img src="5.jpeg"></a></li>
//   </ul>
// </div>