slider.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /*
  2. By sean at 2010.07, modified on 2010.09.10;
  3. Example:
  4. $(".productshow").xslider({//.productshow是要移动对象的外框;
  5. unitdisplayed:3,//可视的单位个数 必需项;
  6. movelength:1,//要移动的单位个数 必需项;
  7. maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度;
  8. scrollobj:null,//要移动的对象 默认查找productshow下的ul;
  9. unitlen:null,//移动的单位宽或高度 默认查找li的尺寸;
  10. nowlength:null,//移动最长宽或高(要移动对象的宽度或高度) 默认由li个数乘以unitlen所得的积;
  11. dir:"H",//水平移动还是垂直移动,默认H为水平移动,传入V或其他字符则表示垂直移动;
  12. autoscroll:1000//自动移动间隔时间 默认null不自动移动;
  13. });
  14. */
  15. jQuery.extend(jQuery.easing,{
  16. easeInSine: function (x, t, b, c, d) {
  17. return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
  18. }
  19. });
  20. (function($){
  21. $.fn.xslider=function(settings){
  22. settings=$.extend({},$.fn.xslider.defaults,settings);
  23. this.each(function(){
  24. var scrollobj=settings.scrollobj || $(this).find("ul");
  25. var maxlength=settings.maxlength || (settings.dir=="H" ? scrollobj.parent().width() : scrollobj.parent().height());//length of the wrapper visible;
  26. var scrollunits=scrollobj.find("li");//units to move;
  27. var unitlen=settings.unitlen || (settings.dir=="H" ? scrollunits.eq(0).outerWidth() : scrollunits.eq(0).outerHeight());
  28. var unitdisplayed=settings.unitdisplayed;//units num displayed;
  29. var nowlength=settings.nowlength || scrollunits.length*unitlen;//length of the scrollobj;
  30. var offset=0;
  31. var sn=0;
  32. var movelength=unitlen*settings.movelength;
  33. var moving=false;//moving now?;
  34. var btnright=$(this).find("a.aright");
  35. var btnleft=$(this).find("a.aleft");
  36. if(settings.dir=="H"){
  37. scrollobj.css("left","0px");
  38. }else{
  39. scrollobj.css("top","0px");
  40. }
  41. if(nowlength>maxlength){
  42. btnleft.addClass("agrayleft");
  43. btnright.removeClass("agrayright");
  44. offset=nowlength-maxlength;
  45. }else{
  46. btnleft.addClass("agrayleft");
  47. btnright.addClass("agrayright");
  48. }
  49. btnleft.click(function(){
  50. if($(this).is("[class*='agrayleft']")){return false;}
  51. if(!moving){
  52. moving=true;
  53. sn-=movelength;
  54. if(sn>unitlen*unitdisplayed-maxlength){
  55. jQuery.fn.xslider.scroll(scrollobj,-sn,settings.dir,function(){moving=false;});
  56. }else{
  57. jQuery.fn.xslider.scroll(scrollobj,0,settings.dir,function(){moving=false;});
  58. sn=0;
  59. $(this).addClass("agrayleft");
  60. }
  61. btnright.removeClass("agrayright");
  62. }
  63. return false;
  64. });
  65. btnright.click(function(){
  66. if($(this).is("[class*='agrayright']")){return false;}
  67. if(!moving){
  68. moving=true;
  69. sn+=movelength;
  70. if(sn<offset-(unitlen*unitdisplayed-maxlength)){
  71. jQuery.fn.xslider.scroll(scrollobj,-sn,settings.dir,function(){moving=false;});
  72. }else{
  73. jQuery.fn.xslider.scroll(scrollobj,-offset,settings.dir,function(){moving=false;});//滚动到最后一个位置;
  74. sn=offset;
  75. $(this).addClass("agrayright");
  76. }
  77. btnleft.removeClass("agrayleft");
  78. }
  79. return false;
  80. });
  81. if(settings.autoscroll){
  82. jQuery.fn.xslider.autoscroll($(this),settings.autoscroll);
  83. }
  84. })
  85. }
  86. })(jQuery);
  87. jQuery.fn.xslider.defaults = {
  88. maxlength:0,
  89. scrollobj:null,
  90. unitlen:0,
  91. nowlength:0,
  92. dir:"H",
  93. autoscroll:null
  94. };
  95. jQuery.fn.xslider.scroll=function(obj,w,dir,callback){
  96. if(dir=="H"){
  97. obj.animate({
  98. left:w
  99. },500,"easeInSine",callback);
  100. }else{
  101. obj.animate({
  102. top:w
  103. },500,"easeInSine",callback);
  104. }
  105. }
  106. jQuery.fn.xslider.autoscroll=function(obj,time){
  107. var vane="right";
  108. function autoscrolling(){
  109. if(vane=="right"){
  110. if(!obj.find("a.agrayright").length){
  111. obj.find("a.aright").trigger("click");
  112. }else{
  113. vane="left";
  114. }
  115. }
  116. if(vane=="left"){
  117. if(!obj.find("a.agrayleft").length){
  118. obj.find("a.aleft").trigger("click");
  119. }else{
  120. vane="right";
  121. }
  122. }
  123. }
  124. var scrollTimmer=setInterval(autoscrolling,time);
  125. obj.hover(function(){
  126. clearInterval(scrollTimmer);
  127. },function(){
  128. scrollTimmer=setInterval(autoscrolling,time);
  129. });
  130. }