/*! * jQuery cxScroll 1.2.1 * http://code.ciaoca.com/ * https://github.com/ciaoca/cxScroll * E-mail: ciaoca@gmail.com * Released under the MIT license * Date: 2014-03-10 */ (function($){ $.fn.cxScroll=function(settings){ if(!this.length){return}; settings=$.extend({},$.cxScroll.defaults,settings); var obj=this; var scroller={ lock:false, dom:{} }; scroller.init=function(){ scroller.dom.box=obj.find(".box"); scroller.dom.list=scroller.dom.box.find(".list"); scroller.dom.items=scroller.dom.list.find("li"); scroller.itemSum=scroller.dom.items.length; // 没有元素或只有1个元素时,不进行滚动 if(scroller.itemSum<=1){return}; scroller.dom.prevBtn=obj.find(".prev"); scroller.dom.nextBtn=obj.find(".next"); scroller.itemWidth=scroller.dom.items.outerWidth(); scroller.itemHeight=scroller.dom.items.outerHeight(); if(settings.direction=="left"||settings.direction=="right"){ // 容器宽度不足时,不进行滚动 if(scroller.itemWidth*scroller.itemSum<=scroller.dom.box.outerWidth()){return}; scroller.prevVal="left"; scroller.nextVal="right"; scroller.moveVal=scroller.itemWidth; }else{ // 容器高度不足时,不进行滚动 if(scroller.itemHeight*scroller.itemSum<=scroller.dom.box.outerHeight()){return}; scroller.prevVal="top"; scroller.nextVal="bottom"; scroller.moveVal=scroller.itemHeight; }; // 元素:后补 scroller.dom.list.append(scroller.dom.list.html()); // 添加元素:手动操作按钮 if(settings.prevBtn&&!scroller.dom.prevBtn.length){ scroller.dom.prevBtn=$("",{"class":"prev"}).prependTo(obj); }; if(settings.nextBtn&&!scroller.dom.nextBtn.length){ scroller.dom.nextBtn=$("",{"class":"next"}).prependTo(obj); }; // 事件:鼠标移入停止,移出开始 if(settings.auto){ obj.hover(function(){ settings.auto=false; scroller.lock=false; scroller.off(); },function(){ settings.auto=true; scroller.lock=false; scroller.on(); }); }; scroller.bindEvents(); scroller.on(); }; scroller.bindEvents=function(){ if(settings.nextBtn&&scroller.dom.prevBtn.length){ scroller.dom.nextBtn.bind("click",function(){ if(!scroller.lock){ scroller.goto(scroller.nextVal,settings.accel); }; }); }; if(settings.prevBtn&&scroller.dom.prevBtn.length){ scroller.dom.prevBtn.bind("click",function(){ if(!scroller.lock){ scroller.goto(scroller.prevVal,settings.accel); }; }); }; }; // 方法:开始 scroller.on=function(){ if(!settings.auto){return}; if(typeof(scroller.run)!=="undefined"){ clearTimeout(scroller.run); }; scroller.run=setTimeout(function(){ scroller.goto(settings.direction); },settings.time); }; // 方法:停止 scroller.off=function(){ scroller.dom.box.stop(true); if(typeof(scroller.run)!=="undefined"){ clearTimeout(scroller.run); }; }; // 方法:滚动 scroller.goto=function(d,t){ scroller.off(); if(settings.controlLock){ scroller.lock=true; }; var _max; // _max 滚动的最大限度 var _dis; // _dis 滚动的距离 var _speed=t||settings.speed; switch(d){ case "left": case "top": _max=0; if(d=="left"){ if(parseInt(scroller.dom.box.scrollLeft(),10)==0){ scroller.dom.box.scrollLeft(scroller.itemSum*scroller.moveVal); }; _dis=scroller.dom.box.scrollLeft()-(scroller.moveVal*settings.step); if(_dis%scroller.itemWidth>0){ _dis-=(_dis%scroller.itemWidth)-scroller.itemWidth; }; if(_dis<_max){_dis=_max}; scroller.dom.box.animate({"scrollLeft":_dis},_speed,settings.easing,function(){ if(parseInt(scroller.dom.box.scrollLeft(),10)<=_max){ scroller.dom.box.scrollLeft(0); }; }); }else{ if(parseInt(scroller.dom.box.scrollTop(),10)==0){ scroller.dom.box.scrollTop(scroller.itemSum*scroller.moveVal); }; _dis=scroller.dom.box.scrollTop()-(scroller.moveVal*settings.step); if(_dis%scroller.itemHeight>0){ _dis-=(_dis%scroller.itemHeight)-scroller.itemHeight; }; if(_dis<_max){_dis=_max}; scroller.dom.box.animate({"scrollTop":_dis},_speed,settings.easing,function(){ if(parseInt(scroller.dom.box.scrollTop(),10)<=_max){ scroller.dom.box.scrollTop(0); }; }); }; break; case "right": case "bottom": _max=scroller.itemSum*scroller.moveVal; if(d=="right"){ _dis=scroller.dom.box.scrollLeft()+(scroller.moveVal*settings.step); if(_dis%scroller.itemWidth>0){ _dis-=(_dis%scroller.itemWidth); }; if(_dis>_max){_dis=_max}; scroller.dom.box.animate({"scrollLeft":_dis},_speed,settings.easing,function(){ if(parseInt(scroller.dom.box.scrollLeft(),10)>=_max){ scroller.dom.box.scrollLeft(0); }; }); }else{ _dis=scroller.dom.box.scrollTop()+(scroller.moveVal*settings.step); if(_dis%scroller.itemHeight>0){ _dis-=(_dis%scroller.itemHeight); }; if(_dis>_max){_dis=_max}; scroller.dom.box.animate({"scrollTop":_dis},_speed,settings.easing,function(){ if(parseInt(scroller.dom.box.scrollTop(),10)>=_max){ scroller.dom.box.scrollTop(0); }; }); }; break; // not default }; scroller.dom.box.queue(function(){ if(settings.controlLock){ scroller.lock=false; }; scroller.on(); $(this).dequeue(); }); }; scroller.init(); }; // 默认值 $.cxScroll={defaults:{ direction:"right", // 滚动方向 easing:"swing", // 缓动方式 step:1, // 滚动步长 accel:160, // 手动滚动速度 speed:800, // 自动滚动速度 time:4000, // 自动滚动间隔时间 auto:true, // 是否自动滚动 prevBtn:true, // 是否使用 prev 按钮 nextBtn:true, // 是否使用 next 按钮 safeLock:true // 滚动时是否锁定控制按钮 }}; })(jQuery);