jquery.cxscroll.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /*!
  2. * cxScroll 1.0.0
  3. * DownLoad by www.juheweb.com
  4. */
  5. (function($){
  6. $.fn.cxScroll=function(settings){
  7. if(!this.length){return;};
  8. settings=$.extend({},$.cxScroll.defaults,settings);
  9. var obj=this;
  10. var scroller={};
  11. scroller.fn={};
  12. scroller.box=obj.find(".box");
  13. scroller.list=scroller.box.find(".list");
  14. scroller.items=scroller.list.find("li");
  15. scroller.itemSum=scroller.items.length;
  16. if(scroller.itemSum<=1){return;};
  17. scroller.plusBtn=obj.find(".plus");
  18. scroller.minusBtn=obj.find(".minus");
  19. scroller.itemWidth=scroller.items.outerWidth();
  20. scroller.itemHeight=scroller.items.outerHeight();
  21. if(settings.direction=="left"||settings.direction=="right"){
  22. if(scroller.itemWidth*scroller.itemSum<=scroller.box.outerWidth()){return;};
  23. scroller.plusVal="left";
  24. scroller.minusVal="right";
  25. scroller.moveVal=scroller.itemWidth;
  26. }else{
  27. if(scroller.itemHeight*scroller.itemSum<=scroller.box.outerHeight()){return;};
  28. scroller.plusVal="top";
  29. scroller.minusVal="bottom";
  30. scroller.moveVal=scroller.itemHeight;
  31. };
  32. // 元素:左右操作按钮
  33. if(settings.plus&&!scroller.plusBtn.length){
  34. scroller.plusBtn=$("<a></a>",{"class":"plus"}).appendTo(obj);
  35. };
  36. if(settings.minus&&!scroller.minusBtn.length){
  37. scroller.minusBtn=$("<a></a>",{"class":"minus"}).appendTo(obj);
  38. };
  39. // 元素:后补
  40. scroller.list.append(scroller.list.html());
  41. // 方法:开始
  42. scroller.fn.on=function(){
  43. if(!settings.auto){return;};
  44. scroller.fn.off();
  45. scroller.run=setTimeout(function(){
  46. scroller.fn.goto(settings.direction);
  47. },settings.time);
  48. };
  49. // 方法:停止
  50. scroller.fn.off=function(){
  51. if(typeof(scroller.run)!=="undefined"){clearTimeout(scroller.run);};
  52. };
  53. // 方法:增加控制
  54. scroller.fn.addControl=function(){
  55. if(settings.plus&&scroller.minusBtn.length){
  56. scroller.plusBtn.bind("click",function(){
  57. scroller.fn.goto(scroller.plusVal);
  58. });
  59. };
  60. if(settings.minus&&scroller.minusBtn.length){
  61. scroller.minusBtn.bind("click",function(){
  62. scroller.fn.goto(scroller.minusVal);
  63. });
  64. };
  65. };
  66. // 方法:解除控制
  67. scroller.fn.removeControl=function(){
  68. if(scroller.plusBtn.length){scroller.plusBtn.unbind("click");};
  69. if(scroller.minusBtn.length){scroller.minusBtn.unbind("click");};
  70. };
  71. // 方法:滚动
  72. scroller.fn.goto=function(d){
  73. scroller.fn.off();
  74. scroller.fn.removeControl();
  75. scroller.box.stop(true);
  76. var _max; // _max 滚动的最大限度
  77. var _dis; // _dis 滚动的距离
  78. switch(d){
  79. case "left":
  80. case "top":
  81. _max=0;
  82. if(d=="left"){
  83. if(parseInt(scroller.box.scrollLeft(),10)==0){
  84. scroller.box.scrollLeft(scroller.itemSum*scroller.moveVal);
  85. };
  86. _dis=scroller.box.scrollLeft()-(scroller.moveVal*settings.step);
  87. if(_dis<_max){_dis=_max};
  88. scroller.box.animate({"scrollLeft":_dis},settings.speed,function(){
  89. if(parseInt(scroller.box.scrollLeft(),10)<=_max){
  90. scroller.box.scrollLeft(0);
  91. };
  92. scroller.fn.addControl();
  93. });
  94. }else{
  95. if(parseInt(scroller.box.scrollTop(),10)==0){
  96. scroller.box.scrollTop(scroller.itemSum*scroller.moveVal);
  97. };
  98. _dis=scroller.box.scrollTop()-(scroller.moveVal*settings.step);
  99. if(_dis<_max){_dis=_max};
  100. scroller.box.animate({"scrollTop":_dis},settings.speed,function(){
  101. if(parseInt(scroller.box.scrollTop(),10)<=_max){
  102. scroller.box.scrollTop(0);
  103. };
  104. scroller.fn.addControl();
  105. });
  106. };
  107. break;
  108. case "right":
  109. case "bottom":
  110. _max=scroller.itemSum*scroller.moveVal;
  111. if(d=="right"){
  112. _dis=scroller.box.scrollLeft()+(scroller.moveVal*settings.step);
  113. if(_dis>_max){_dis=_max};
  114. scroller.box.animate({"scrollLeft":_dis},settings.speed,function(){
  115. if(parseInt(scroller.box.scrollLeft(),10)>=_max){
  116. scroller.box.scrollLeft(0);
  117. };
  118. });
  119. }else{
  120. _dis=scroller.box.scrollTop()+(scroller.moveVal*settings.step);
  121. if(_dis>_max){_dis=_max};
  122. scroller.box.animate({"scrollTop":_dis},settings.speed,function(){
  123. if(parseInt(scroller.box.scrollTop(),10)>=_max){
  124. scroller.box.scrollTop(0);
  125. };
  126. });
  127. };
  128. break;
  129. };
  130. scroller.box.queue(function(){
  131. scroller.fn.addControl();
  132. scroller.fn.on();
  133. $(this).dequeue();
  134. });
  135. };
  136. // 事件:鼠标移入停止,移出开始
  137. scroller.box.hover(function(){
  138. scroller.fn.off();
  139. },function(){
  140. scroller.fn.on();
  141. });
  142. scroller.fn.addControl();
  143. scroller.fn.on();
  144. };
  145. // 默认值
  146. $.cxScroll={defaults:{
  147. direction:"right", // 滚动方向
  148. step:1, // 滚动步长
  149. speed:800, // 滚动速度
  150. time:4000, // 自动滚动间隔时间
  151. auto:true, // 是否自动滚动
  152. plus:true, // 是否使用 plus 按钮
  153. minus:true // 是否使用 minus 按钮
  154. }};
  155. })(jQuery);