﻿/*!
 * 水平方向上的图片(点击左右按钮)滑动展示 1.0
 * http://www.newtempo.com
 * Copyright 2011-09-01, 刘伟
 *------参数列表------
 *string lid 左边按钮的id[必需]
 *string rid 右边按钮的id[必需]
 *int time 动画的时间长,默认为400[可选]
 *function imgClick 图片点击的事件[可选]
 *Boolean autoHidden 是否自动隐藏左右按钮,默认为false[可选]
 */
$.fn.extend({
	imgHLRShow: function(args) {
		var defaults= {
			//动画完成的时间
			time:400,
			//图片点击事件
			imgClick: function() {
			},
			//是否自动隐藏按钮
			autoHidden:false
		};
		var options = $.extend(defaults, args);
		var lock=true;//为事件加锁,防止一次动作未完成又激发同一事件
		var imgFirstNum=0;//显示的最左边的图片的位置
		var _this=$(this);//得到图片容器
		var imgs=$("#"+_this.attr("id")+" img");//得到容器下的图片集
		imgs.click(options.imgClick);//设置图片的点击事件
		var imgsSize=imgs.size();//得到图片的数量
		var imgWidth=imgs.eq(0).width()+parseInt(imgs.eq(0).css("margin-left"))+parseInt(imgs.eq(0).css("margin-right"));//得到一个图片实际所占的宽度
		_this.width(imgsSize*imgWidth);//自动调整宽度
		var maxNum=parseInt(_this.parent("div").width()/imgWidth);//最大能容纳的图片数
		var leftButton=$("#"+options.lid);//左按钮
		var rightButton=$("#"+options.rid);//右按钮
		//alert(imgWidth);
		if(options.autoHidden) {
			autoHidden();
		}
		if(maxNum<=imgsSize) {
			for(var i=0;i<maxNum;i++) {
				imgs.eq(i).css("display","inline");
			}
		} else {
			imgs.css("display","inline");
		}
		//左边按钮事件
		leftButton.click( function() {
			if(lock) {
				if(imgFirstNum>0) {
					lock=false;
					var ml=parseInt(_this.css("margin-left"));
					_this.animate({
						marginLeft:(ml+imgWidth)
					},options.time, function() {
						lock=true;
						imgFirstNum--;
						autoHidden();
					});
				}
			}
		});
		//右边按钮事件
		rightButton.click( function() {
			if(lock) {
				if(imgFirstNum<imgsSize-maxNum) {
					lock=false;
					imgs.eq(imgFirstNum+maxNum).css("display","inline");
					var ml=parseInt(_this.css("margin-left"));
					_this.animate({
						marginLeft:(ml-imgWidth)
					},options.time, function() {
						lock=true;
						imgFirstNum++;
						autoHidden();
					});
				}
			}
		});
		//自动隐藏左右按钮
		function autoHidden() {
			if(options.autoHidden) {
				if(imgFirstNum>0) {
					leftButton.css("visibility","visible");
				} else {
					leftButton.css("visibility","hidden");
				}
				if(imgFirstNum<imgsSize-maxNum) {
					rightButton.css("visibility","visible");
				} else {
					rightButton.css("visibility","hidden");
				}
			}
		};

	}
});
