基于jQuery的自用滚动插件

/*
 * 图片滚动插件，
 * 用法：
 * 自动滚动
 * 传入参数config={
 * 	id:"#xx"//容器的id
 *  w:"每个图片的宽度数字"
 * }
 * var scrollImg = (new ScrollImg()).initAuto({
					id:"#scrollImg",
					w:456
				})
 * 点击滚动
 * //案例滚动
	var alScroll = (new ScrollImg()).leftAnimate({
		id:"#alScroll",//容器id，这个容器需要调整好css，使得初始的时候offsetLeft = 0
		w:1168,//每次滚动距离
		left:".al_left",//点击向左元素
		right:".al_right",//点击向右元素
		onshowNum:1,//一页展示数量
		_child:".alContainer"//容器子元素用来计算个数
	})
 * */
var ScrollImg = (function($){
		//私有方法，获取滚动数值
		var getAutoNum = function(that,totalW,_wid){
			//容器向左的偏移量
			var _left = - that[0].offsetLeft;
			var num = '';
			//可以继续滚动的情况
			if(totalW > (_wid + _left) ){
				num = _left + _wid
			}else{
				//不能继续滚动的时候先把left设置为0，形成一直往左滚动的动画效果
				that.css("left","0");
				num = _wid;
			}
			return num;
		};
		var getLeftNum = function(that,totalW,_wid,ons){
			//容器向左的偏移量
			var _left = - that[0].offsetLeft;
			var num = '';
			//可以继续滚动的情况
			if(totalW > (_wid*ons + _left) ){
				num = _left + _wid
			}else{
				num = _left;
			}
			return num;
		};
		var getRightNum = function(that,totalW,_wid){
			//容器向左的偏移量
			var _left = - that[0].offsetLeft;
			var num = '';
			//可以继续滚动的情况
			if(_left > 0 ){
				num = _left  -  _wid
			}else{
				//不能继续滚动的时候先把left设置为0，形成一直往左滚动的动画效果
				that.css("left","0");
				num = 0;
			}
			return num;
		};
		var autoRight = function(that,num,callback){
			that.animate({left:-num+'px'},function(){
				callback && callback()
			})
		};
		//绑定事件
		var _bindAuto = function(that,_wid){
			//预先clone第一个到最后位置
			that.append(that.find("img:first").clone())
			//先设置容器宽度
			var totalW = that.find("img").length * _wid;
			that[0].style.width = totalW +"px";
			window.setInterval(function(){
				var num = getAutoNum(that,totalW,_wid);
				autoRight(that,num)
			},3000)
		};
		//绑定向左滚动 点击右键
		var _leftAnimate= function(that,_wid,ons,_state,totalW){
			var num = getLeftNum(that,totalW,_wid,ons);
			autoRight(that,num,function(){
				$(_state).attr("state","");
			})
		};
		//绑定向右滚动 点击左键
		var _rightAnimate = function(that,_wid,_state,totalW){
			
			var num = getRightNum(that,totalW,_wid);
			autoRight(that,num,function(){
				$(_state).attr("state","");
			})
		};
		var clickBind = function(config){
			
			//容器元素
			var _dom = $(config.id);
			//先设置容器宽度
			var totalW = _dom.find(config._child).length * config.w;
			_dom[0].style.width = totalW +"px";
			$(config.right).on("click",function(){
				if(!$(this).attr("state")){
					$(this).attr("state","true");
					_leftAnimate(_dom,config.w,config.onshowNum,config.right,totalW)
				}
				
			})
			$(config.left).on("click",function(){
				if(!$(this).attr("state")){
					$(this).attr("state","true");
					_rightAnimate(_dom,config.w,config.left,totalW)
				}
			})
		}
		var scrollFun = function(config){
			
		}
		//自动滚动
		scrollFun.prototype.initAuto = function(config){
			var _dom = $(config.id);
			_bindAuto(_dom,config.w);
		}
		scrollFun.prototype.leftAnimate = function(config){
			clickBind(config)
		}
		//返回构造函数
		return scrollFun;
})(jQuery)