├── img ├── control.png ├── control.psd ├── temp_pic_1.jpg ├── temp_pic_2.jpg ├── temp_pic_3.jpg ├── temp_pic_4.jpg └── temp_pic_5.jpg ├── options.html ├── css └── layout.css ├── README.md ├── api.html ├── index.html └── js ├── jquery.cxscroll.min.js └── jquery.cxscroll.js /img/control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/control.png -------------------------------------------------------------------------------- /img/control.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/control.psd -------------------------------------------------------------------------------- /img/temp_pic_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/temp_pic_1.jpg -------------------------------------------------------------------------------- /img/temp_pic_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/temp_pic_2.jpg -------------------------------------------------------------------------------- /img/temp_pic_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/temp_pic_3.jpg -------------------------------------------------------------------------------- /img/temp_pic_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/temp_pic_4.jpg -------------------------------------------------------------------------------- /img/temp_pic_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ciaoca/cxScroll/HEAD/img/temp_pic_5.jpg -------------------------------------------------------------------------------- /options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库 6 | 7 | 8 | 9 |

jQuery cxScroll 间歇式无缝滚动

10 | 11 |

12 |

鼠标移入的时候，列表保持自动滚动

13 |

14 |

15 |

22 |

23 |

24 | 25 |

不使用自动滚动

26 |

27 |

28 |

35 |

36 |

37 | 38 |

文档

39 |

Github
中文文档

43 | 44 |

作者

45 |

http://ciaoca.com/

46 |

Released under the MIT license

47 |

48 | 49 | 50 | 51 | 61 | 62 | -------------------------------------------------------------------------------- /css/layout.css: -------------------------------------------------------------------------------- 1 | body,h1,h2,h3,ul,li,p{margin:0;padding:0;} 2 | body{font:14px/1.7 Arial,"\5b8b\4f53";} 3 | h1,h2,h3{font:bold 36px/2 "\5fae\8f6f\96c5\9ed1";} 4 | h1{padding:0 20px;background:#333;color:#fff;} 5 | h2{font-size:20px;} 6 | h3{font-size:16px;} 7 | ul{list-style-type:none;} 8 | 9 | .wrap{padding:20px;} 10 | 11 | /** 12 | * 横向滚动 13 | * ------------------------------ */ 14 | .scroll_horizontal{position:relative;width:660px;height:120px;padding:10px;background-color:#eee;} 15 | .scroll_horizontal .box{overflow:hidden;position:relative;width:580px;height:120px;margin:0 auto;} 16 | .scroll_horizontal .list{overflow:hidden;width:9999px;} 17 | .scroll_horizontal .list li{float:left;width:200px;} 18 | .scroll_horizontal .prev, 19 | .scroll_horizontal .next{position:absolute;top:50%;margin-top:-25px;width:40px;height:50px;background-image:url(../img/control.png);background-repeat:no-repeat;font:0/0 Arial;cursor:pointer;} 20 | .scroll_horizontal .prev{left:5px;background-position:0 0;} 21 | .scroll_horizontal .next{right:5px;background-position:-40px 0;} 22 | .scroll_horizontal .prev:hover{background-position:0 -50px;} 23 | .scroll_horizontal .next:hover{background-position:-40px -50px;} 24 | 25 | /** 26 | * 纵向滚动 27 | * ------------------------------ */ 28 | .scroll_vertical{position:relative;width:180px;height:340px;padding:10px;background:#eee;} 29 | .scroll_vertical .box{overflow:hidden;position:relative;top:40px;height:260px;} 30 | .scroll_vertical .list{position:absolute;top:0;left:0;} 31 | .scroll_vertical .list li{height:140px;text-align:center;} 32 | .scroll_vertical .prev, 33 | .scroll_vertical .next{position:absolute;left:50%;width:120px;height:30px;margin-left:-25px;width:50px;height:40px;background-image:url(../img/control.png);background-repeat:no-repeat;font:0/0 Arial;cursor:pointer;} 34 | .scroll_vertical .prev{top:5px;background-position:-80px 0;} 35 | .scroll_vertical .next{bottom:5px;background-position:-130px 0;} 36 | .scroll_vertical .prev:hover{background-position:-80px -40px;} 37 | .scroll_vertical .next:hover{background-position:-130px -40px;} 38 | 39 | 40 | 41 | #acts{margin-top:20px;} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery cxScroll 2 | 3 | 一款基于jQuery的无缝滚动插件，可自定义外观及调用参数，兼容主流浏览器。 4 | 5 | **版本：** 6 | 7 | * jQuery v1.7+ 8 | * jQuery cxScroll v1.2.2 9 | 10 | **注意事项：** 11 | 12 | 1. 内部会自动创建 prev 及 next 切换按钮，也可以在外部直接创建，若外部已创建或设置 prevBtn:false 及 nextBtn:false ，内部将跳过此步骤； 13 | 2. 若（滚动的列表宽度 ≤ 父元素的宽度），则不会自动创建 prev 及 next 切换按钮，也不会自动滚动。 14 | 15 | 文档：http://code.ciaoca.com/jquery/cxScroll/ 16 | 17 | 示例：http://code.ciaoca.com/jquery/cxScroll/demo/ 18 | 19 | ## 使用方法 20 | 21 | ### CSS 样式结构 22 | 23 | 除必要属性设置外，其他样式均可自行设置。 24 | 25 | ```css 26 | /* 横向滚动基本样式 */ 27 | .cxscroll{} 28 | .cxscroll .box{overflow:hidden;width:600px;} 29 | .cxscroll .list{overflow:hidden;width:9999px;} 30 | .cxscroll .list li{float:left;width:200px;height:100px;} 31 | .cxscroll .prev{} 32 | .cxscroll .next{} 33 | 34 | /* 纵向滚动基本样式 */ 35 | .cxscroll{} 36 | .cxscroll .box{overflow:hidden;height:300px;} 37 | .cxscroll .list{} 38 | .cxscroll .list li{height:100px;} 39 | .cxscroll .prev{} 40 | .cxscroll .next{} 41 | ``` 42 | 43 | ### DOM 结构 44 | 45 | ```html 46 |

47 |

48 |

54 |

55 | 56 | 57 | 58 |

59 | ``` 60 | 61 | ### 调用 cxScroll 62 | ```javascript 63 | $("#element_id").cxScroll(); 64 | ``` 65 | 66 | ## options 参数说明 67 | 68 | 名称|默认值|说明 69 | ---|---|--- 70 | direction|'right'|滚动方向。可设置为："left", "right", "top", "bottom" 71 | easing|'swing'|缓动方式 72 | step|1|滚动步长 73 | accel|200|手动滚动速度 (ms)，点击控制按钮滚动的速度。 74 | speed|800|自动滚动速度 (ms) 75 | time|4000|自动滚动间隔时间 (ms) 76 | auto|true|是否自动滚动 77 | hoverLock|true|鼠标移入移出锁定。鼠标进入区域内时停止自动轮播，离开后恢复自动轮播（仅在 auto 为 true 时有效） 78 | prevBtn|true|是否使用 prev 按钮 79 | nextBtn|true|是否使用 next 按钮 80 | 81 | 82 | ## API接口 83 | 84 | ```javascript 85 | var Api; 86 | $('#element_id').cxScroll(function(api){ 87 | Api = api; 88 | }); 89 | // 或者作为第二个参数传入 90 | $('#element_id').cxScroll({ 91 | minus: true, 92 | plus: true 93 | }, function(api){ 94 | Api = api; 95 | }); 96 | ``` 97 | 98 | 名称|说明 99 | ---|--- 100 | play()|开始自动播放 101 | stop()|停止自动播放 102 | prev(speed)|向前滚动。speed 为滚动速度(ms) 103 | next(speed)|向后滚动。speed 为滚动速度(ms) 104 | -------------------------------------------------------------------------------- /api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库 6 | 7 | 8 | 9 |

jQuery cxScroll 间歇式无缝滚动

10 | 11 |

12 |

API 接口

13 |

14 |

15 |

22 |

23 |

24 |

25 |

33 |

34 | 35 |

文档

36 |

Github
中文文档

40 | 41 |

作者

42 |

http://ciaoca.com/

43 |

Released under the MIT license

44 |

45 | 46 | 47 | 48 | 92 | 93 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cxScroll 间歇式无缝滚动 » 在线演示 - 前端开发仓库 6 | 7 | 8 | 9 |

jQuery cxScroll 间歇式无缝滚动

10 | 11 |

12 |

横向滚动 right

13 |

14 |

15 |

22 |

23 |

24 | 25 |

横向滚动 left

26 |

27 |

28 |

35 |

36 |

37 | 38 |

垂直滚动 bottom

39 |

40 |

41 |

48 |

49 |

50 | 51 |

垂直滚动 top

52 |

53 |

54 |

61 |

62 |

63 | 64 |

文档

65 |

Github
中文文档

69 | 70 |

作者

71 |

http://ciaoca.com/

72 |

Released under the MIT license

73 |

74 | 75 | 76 | 77 | 89 | 90 | -------------------------------------------------------------------------------- /js/jquery.cxscroll.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery cxScroll 1.2.2 3 | * http://code.ciaoca.com/ 4 | * https://github.com/ciaoca/cxScroll 5 | * E-mail: ciaoca@gmail.com 6 | * Released under the MIT license 7 | * Date: 2015-09-17 8 | */ 9 | !function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){a.cxScroll=function(){var b,c,d,h,i,e={dom:{},api:{},lockState:!1},f=function(a){return a&&("function"==typeof HTMLElement||"object"==typeof HTMLElement)&&a instanceof HTMLElement?!0:a&&a.nodeType&&1===a.nodeType?!0:!1},g=function(a){return a&&a.length&&("function"==typeof jQuery||"object"==typeof jQuery)&&a instanceof jQuery?!0:!1};for(h=0,i=arguments.length;i>h;h++)g(arguments[h])?b=arguments[h]:f(arguments[h])?b=a(arguments[h]):"function"==typeof arguments[h]?d=arguments[h]:"object"==typeof arguments[h]&&(c=arguments[h]);b.length&&(e.init=function(){var e=this;e.dom.el=b,e.settings=a.extend({},a.cxScroll.defaults,c),e.build(),e.api={play:function(){e.settings.auto=!0,e.play()},stop:function(){e.settings.auto=!1,e.stop()},prev:function(a){a=parseInt(a,10),("number"!=typeof a||0>a)&&(a=e.settings.speed),e.goto(e.prevVal,a)},next:function(a){a=parseInt(a,10),("number"!=typeof a||0>a)&&(a=e.settings.speed),e.goto(e.nextVal,a)}},"function"==typeof d&&d(e.api)},e.build=function(){var b=this;if(b.dom.box=b.dom.el.find(".box"),b.dom.list=b.dom.box.find(".list"),b.dom.items=b.dom.list.find("li"),b.itemSum=b.dom.items.length,!(b.itemSum<=1)){if(b.dom.prevBtn=b.dom.el.find(".prev"),b.dom.nextBtn=b.dom.el.find(".next"),b.itemWidth=b.dom.items.outerWidth(),b.itemHeight=b.dom.items.outerHeight(),"left"===b.settings.direction||"right"===b.settings.direction){if(b.itemWidth*b.itemSum<=b.dom.box.outerWidth())return;b.prevVal="left",b.nextVal="right",b.moveVal=b.itemWidth}else{if(b.itemHeight*b.itemSum<=b.dom.box.outerHeight())return;b.prevVal="top",b.nextVal="bottom",b.moveVal=b.itemHeight}b.dom.list.append(b.dom.list.html()),b.settings.prevBtn&&!b.dom.prevBtn.length&&(b.dom.prevBtn=a("",{"class":"prev"}).prependTo(b.dom.el)),b.settings.nextBtn&&!b.dom.nextBtn.length&&(b.dom.nextBtn=a("",{"class":"next"}).prependTo(b.dom.el)),b.settings.nextBtn&&b.dom.prevBtn.length&&b.dom.nextBtn.bind("click",function(){b.lockState||b.goto(b.nextVal,b.settings.accel)}),b.settings.prevBtn&&b.dom.prevBtn.length&&b.dom.prevBtn.bind("click",function(){b.lockState||b.goto(b.prevVal,b.settings.accel)}),b.settings.hoverLock&&(b.dom.box.on("mouseenter",function(){b.stop()}),b.dom.box.on("mouseleave",function(){b.play()})),b.play()}},e.play=function(){var a=this;a.settings.auto&&(a.stop(),a.run=setTimeout(function(){a.goto()},a.settings.time))},e.stop=function(){"undefined"!=typeof this.run&&clearTimeout(this.run)},e.goto=function(b,c){var e,f,d=this,g=c||d.settings.speed;switch("string"!=typeof b&&(b=d.settings.direction),d.stop(),d.lockState=!0,b){case"left":case"top":e=0,"left"===b?(0===parseInt(d.dom.box.scrollLeft(),10)&&d.dom.box.scrollLeft(d.itemSum*d.moveVal),f=d.dom.box.scrollLeft()-d.moveVal*d.settings.step,f%d.itemWidth>0&&(f-=f%d.itemWidth-d.itemWidth),e>f&&(f=e),d.dom.box.animate({scrollLeft:f},g,d.settings.easing,function(){parseInt(d.dom.box.scrollLeft(),10)<=e&&d.dom.box.scrollLeft(0)})):(0===parseInt(d.dom.box.scrollTop(),10)&&d.dom.box.scrollTop(d.itemSum*d.moveVal),f=d.dom.box.scrollTop()-d.moveVal*d.settings.step,f%d.itemHeight>0&&(f-=f%d.itemHeight-d.itemHeight),e>f&&(f=e),d.dom.box.animate({scrollTop:f},g,d.settings.easing,function(){parseInt(d.dom.box.scrollTop(),10)<=e&&d.dom.box.scrollTop(0)}));break;case"right":case"bottom":e=d.itemSum*d.moveVal,"right"===b?(f=d.dom.box.scrollLeft()+d.moveVal*d.settings.step,f%d.itemWidth>0&&(f-=f%d.itemWidth),f>e&&(f=e),d.dom.box.animate({scrollLeft:f},g,d.settings.easing,function(){parseInt(d.dom.box.scrollLeft(),10)>=e&&d.dom.box.scrollLeft(0)})):(f=d.dom.box.scrollTop()+d.moveVal*d.settings.step,f%d.itemHeight>0&&(f-=f%d.itemHeight),f>e&&(f=e),d.dom.box.animate({scrollTop:f},g,d.settings.easing,function(){parseInt(d.dom.box.scrollTop(),10)>=e&&d.dom.box.scrollTop(0)}));break;default:return}d.dom.box.queue(function(){d.lockState=!1,d.play(),a(this).dequeue()})},e.init())},a.cxScroll.defaults={direction:"right",easing:"swing",step:1,accel:200,speed:800,time:4e3,auto:!0,hoverLock:!0,prevBtn:!0,nextBtn:!0},a.fn.cxScroll=function(b,c){return this.each(function(){a.cxScroll(this,b,c)}),this}}); -------------------------------------------------------------------------------- /js/jquery.cxscroll.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery cxScroll 1.2.2 3 | * http://code.ciaoca.com/ 4 | * https://github.com/ciaoca/cxScroll 5 | * E-mail: ciaoca@gmail.com 6 | * Released under the MIT license 7 | * Date: 2015-09-17 8 | */ 9 | (function(factory){ 10 | if (typeof define === 'function' && define.amd) { 11 | define(['jquery'], factory); 12 | } else { 13 | factory(jQuery); 14 | }; 15 | }(function($){ 16 | $.cxScroll = function(){ 17 | var obj; 18 | var settings; 19 | var callback; 20 | var scroller = { 21 | dom: {}, 22 | api: {}, 23 | lockState: false 24 | }; 25 | 26 | // 检测是否为 DOM 元素 27 | var isElement = function(o){ 28 | if(o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) { 29 | return true; 30 | } else { 31 | return (o && o.nodeType && o.nodeType === 1) ? true : false; 32 | }; 33 | }; 34 | 35 | // 检测是否为 jQuery 对象 36 | var isJquery = function(o){ 37 | return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false; 38 | }; 39 | 40 | // 分配参数 41 | for (var i = 0, l = arguments.length; i < l; i++) { 42 | if (isJquery(arguments[i])) { 43 | obj = arguments[i]; 44 | } else if (isElement(arguments[i])) { 45 | obj = $(arguments[i]); 46 | } else if (typeof arguments[i] === 'function') { 47 | callback = arguments[i]; 48 | } else if (typeof arguments[i] === 'object') { 49 | settings = arguments[i]; 50 | }; 51 | }; 52 | 53 | if (!obj.length) {return}; 54 | 55 | scroller.init = function(){ 56 | var self = this; 57 | 58 | self.dom.el = obj; 59 | self.settings = $.extend({}, $.cxScroll.defaults, settings); 60 | 61 | self.build(); 62 | 63 | self.api = { 64 | play: function(){ 65 | self.settings.auto = true; 66 | self.play(); 67 | }, 68 | stop: function(){ 69 | self.settings.auto = false; 70 | self.stop(); 71 | }, 72 | prev: function(speed){ 73 | speed = parseInt(speed, 10); 74 | if (typeof speed !== 'number' || speed < 0) { 75 | speed = self.settings.speed; 76 | }; 77 | self.goto(self.prevVal, speed); 78 | }, 79 | next: function(speed){ 80 | speed = parseInt(speed, 10); 81 | if (typeof speed !== 'number' || speed < 0) { 82 | speed = self.settings.speed; 83 | }; 84 | self.goto(self.nextVal, speed); 85 | } 86 | }; 87 | 88 | if (typeof callback === 'function') { 89 | callback(self.api); 90 | }; 91 | }; 92 | 93 | scroller.build = function(){ 94 | var self = this; 95 | 96 | self.dom.box = self.dom.el.find('.box'); 97 | self.dom.list = self.dom.box.find('.list'); 98 | self.dom.items = self.dom.list.find('li'); 99 | self.itemSum = self.dom.items.length; 100 | 101 | // 没有元素或只有1个元素时，不进行滚动 102 | if (self.itemSum <= 1){return}; 103 | 104 | self.dom.prevBtn = self.dom.el.find('.prev'); 105 | self.dom.nextBtn = self.dom.el.find('.next'); 106 | self.itemWidth = self.dom.items.outerWidth(); 107 | self.itemHeight = self.dom.items.outerHeight(); 108 | 109 | if (self.settings.direction === 'left' || self.settings.direction === 'right') { 110 | // 容器宽度不足时，不进行滚动 111 | if (self.itemWidth * self.itemSum <= self.dom.box.outerWidth()) {return}; 112 | 113 | self.prevVal = 'left'; 114 | self.nextVal = 'right'; 115 | self.moveVal = self.itemWidth; 116 | 117 | } else { 118 | // 容器高度不足时，不进行滚动 119 | if (self.itemHeight * self.itemSum <= self.dom.box.outerHeight()){return}; 120 | 121 | self.prevVal = 'top'; 122 | self.nextVal = 'bottom'; 123 | self.moveVal = self.itemHeight; 124 | }; 125 | 126 | // 元素：后补 127 | self.dom.list.append(self.dom.list.html()); 128 | 129 | // 添加元素：手动操作按钮 130 | if (self.settings.prevBtn && !self.dom.prevBtn.length) { 131 | self.dom.prevBtn = $('', {'class':'prev'}).prependTo(self.dom.el); 132 | }; 133 | if (self.settings.nextBtn && !self.dom.nextBtn.length) { 134 | self.dom.nextBtn = $('', {'class':'next'}).prependTo(self.dom.el); 135 | }; 136 | 137 | // 事件：手动操作 138 | if (self.settings.nextBtn && self.dom.prevBtn.length) { 139 | self.dom.nextBtn.bind('click', function(){ 140 | if (!self.lockState) { 141 | self.goto(self.nextVal, self.settings.accel); 142 | }; 143 | }); 144 | }; 145 | if (self.settings.prevBtn && self.dom.prevBtn.length) { 146 | self.dom.prevBtn.bind('click', function(){ 147 | if (!self.lockState) { 148 | self.goto(self.prevVal, self.settings.accel); 149 | }; 150 | }); 151 | }; 152 | 153 | // 事件：鼠标移入停止，移出开始 154 | if (self.settings.hoverLock) { 155 | self.dom.box.on('mouseenter', function(){ 156 | self.stop(); 157 | }); 158 | self.dom.box.on('mouseleave', function(){ 159 | self.play(); 160 | }); 161 | }; 162 | 163 | self.play(); 164 | }; 165 | 166 | // 方法：开始 167 | scroller.play = function(){ 168 | var self = this; 169 | 170 | if (!self.settings.auto) {return}; 171 | self.stop(); 172 | 173 | self.run = setTimeout(function(){ 174 | self.goto(); 175 | }, self.settings.time); 176 | }; 177 | 178 | // 方法：停止 179 | scroller.stop = function(){ 180 | // 立即停止（效果不是很好） 181 | // this.dom.box.stop(true); 182 | if (typeof(this.run) !== 'undefined') { 183 | clearTimeout(this.run); 184 | }; 185 | }; 186 | 187 | // 方法：滚动 188 | scroller.goto = function(d, t){ 189 | var self = this; 190 | var _max; // 滚动的最大限度 191 | var _dis; // 滚动的距离 192 | var _speed = t || self.settings.speed; 193 | 194 | if (typeof d !== 'string') { 195 | d = self.settings.direction; 196 | }; 197 | 198 | self.stop(); 199 | self.lockState = true; 200 | 201 | switch(d) { 202 | case 'left': 203 | case 'top': 204 | _max = 0; 205 | 206 | if (d === 'left') { 207 | if (parseInt(self.dom.box.scrollLeft(), 10) === 0) { 208 | self.dom.box.scrollLeft(self.itemSum * self.moveVal); 209 | }; 210 | 211 | _dis = self.dom.box.scrollLeft() - (self.moveVal * self.settings.step); 212 | 213 | if (_dis % self.itemWidth > 0) { 214 | _dis -= (_dis % self.itemWidth) - self.itemWidth; 215 | }; 216 | 217 | if (_dis < _max) { 218 | _dis = _max; 219 | }; 220 | 221 | self.dom.box.animate({ 222 | 'scrollLeft': _dis 223 | }, _speed, self.settings.easing, function(){ 224 | if (parseInt(self.dom.box.scrollLeft(), 10) <= _max) { 225 | self.dom.box.scrollLeft(0); 226 | }; 227 | }); 228 | 229 | } else { 230 | if (parseInt(self.dom.box.scrollTop(), 10) === 0) { 231 | self.dom.box.scrollTop(self.itemSum * self.moveVal); 232 | }; 233 | 234 | _dis = self.dom.box.scrollTop() - (self.moveVal * self.settings.step); 235 | 236 | if (_dis % self.itemHeight > 0) { 237 | _dis-=(_dis%self.itemHeight)-self.itemHeight; 238 | }; 239 | 240 | if (_dis < _max){ 241 | _dis = _max; 242 | }; 243 | 244 | self.dom.box.animate({ 245 | 'scrollTop': _dis 246 | }, _speed, self.settings.easing, function(){ 247 | if (parseInt(self.dom.box.scrollTop(), 10) <= _max) { 248 | self.dom.box.scrollTop(0); 249 | }; 250 | }); 251 | }; 252 | break; 253 | 254 | case 'right': 255 | case 'bottom': 256 | _max = self.itemSum * self.moveVal; 257 | 258 | if (d === 'right'){ 259 | _dis = self.dom.box.scrollLeft() + (self.moveVal * self.settings.step); 260 | 261 | if (_dis % self.itemWidth > 0) { 262 | _dis -= (_dis % self.itemWidth); 263 | }; 264 | 265 | if (_dis > _max){ 266 | _dis = _max; 267 | }; 268 | 269 | self.dom.box.animate({ 270 | 'scrollLeft': _dis 271 | }, _speed, self.settings.easing, function(){ 272 | if (parseInt(self.dom.box.scrollLeft(), 10) >= _max) { 273 | self.dom.box.scrollLeft(0); 274 | }; 275 | }); 276 | 277 | } else { 278 | _dis = self.dom.box.scrollTop() + (self.moveVal * self.settings.step); 279 | 280 | if (_dis % self.itemHeight > 0){ 281 | _dis -= (_dis % self.itemHeight); 282 | }; 283 | 284 | if (_dis > _max){ 285 | _dis = _max; 286 | }; 287 | 288 | self.dom.box.animate({ 289 | 'scrollTop': _dis 290 | }, _speed, self.settings.easing, function(){ 291 | if (parseInt(self.dom.box.scrollTop(), 10) >= _max) { 292 | self.dom.box.scrollTop(0); 293 | }; 294 | }); 295 | }; 296 | break; 297 | 298 | default: 299 | return; 300 | }; 301 | 302 | self.dom.box.queue(function(){ 303 | self.lockState = false; 304 | self.play(); 305 | $(this).dequeue(); 306 | }); 307 | }; 308 | 309 | scroller.init(); 310 | }; 311 | 312 | // 默认值 313 | $.cxScroll.defaults = { 314 | direction: 'right', // 滚动方向 315 | easing: 'swing', // 缓动方式 316 | step: 1, // 滚动步长 317 | accel: 200, // 手动滚动速度 318 | speed: 800, // 自动滚动速度 319 | time: 4000, // 自动滚动间隔时间 320 | auto: true, // 是否自动滚动 321 | hoverLock: true, // 鼠标移入移出锁定 322 | prevBtn: true, // 是否使用 prev 按钮 323 | nextBtn: true // 是否使用 next 按钮 324 | }; 325 | 326 | $.fn.cxScroll = function(settings, callback){ 327 | this.each(function(i){ 328 | $.cxScroll(this, settings, callback); 329 | }); 330 | return this; 331 | }; 332 | })); 333 | --------------------------------------------------------------------------------