/*! * jQuery cxScroll 1.2.2 * http://code.ciaoca.com/ * https://github.com/ciaoca/cxScroll * E-mail: ciaoca@gmail.com * Released under the MIT license * Date: 2015-09-17 */ (function(factory){ if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else { factory(jQuery); }; }(function($){ $.cxScroll = function(){ var obj; var settings; var callback; var scroller = { dom: {}, api: {}, lockState: false }; // 检测是否为 DOM 元素 var isElement = function(o){ if(o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) { return true; } else { return (o && o.nodeType && o.nodeType === 1) ? true : false; }; }; // 检测是否为 jQuery 对象 var isJquery = function(o){ return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false; }; // 分配参数 for (var i = 0, l = arguments.length; i < l; i++) { if (isJquery(arguments[i])) { obj = arguments[i]; } else if (isElement(arguments[i])) { obj = $(arguments[i]); } else if (typeof arguments[i] === 'function') { callback = arguments[i]; } else if (typeof arguments[i] === 'object') { settings = arguments[i]; }; }; if (!obj.length) {return}; scroller.init = function(){ var self = this; self.dom.el = obj; self.settings = $.extend({}, $.cxScroll.defaults, settings); self.build(); self.api = { play: function(){ self.settings.auto = true; self.play(); }, stop: function(){ self.settings.auto = false; self.stop(); }, prev: function(speed){ speed = parseInt(speed, 10); if (typeof speed !== 'number' || speed < 0) { speed = self.settings.speed; }; self.goto(self.prevVal, speed); }, next: function(speed){ speed = parseInt(speed, 10); if (typeof speed !== 'number' || speed < 0) { speed = self.settings.speed; }; self.goto(self.nextVal, speed); } }; if (typeof callback === 'function') { callback(self.api); }; }; scroller.build = function(){ var self = this; self.dom.box = self.dom.el.find('.box'); self.dom.list = self.dom.box.find('.list'); self.dom.items = self.dom.list.find('li'); self.itemSum = self.dom.items.length; // 没有元素或只有1个元素时,不进行滚动 if (self.itemSum <= 1){return}; self.dom.prevBtn = self.dom.el.find('.prev'); self.dom.nextBtn = self.dom.el.find('.next'); self.itemWidth = self.dom.items.outerWidth() + 60; self.itemHeight = self.dom.items.outerHeight(); if (self.settings.direction === 'left' || self.settings.direction === 'right') { // 容器宽度不足时,不进行滚动 if (self.itemWidth * self.itemSum <= self.dom.box.outerWidth()) {return}; self.prevVal = 'left'; self.nextVal = 'right'; self.moveVal = self.itemWidth; } else { // 容器高度不足时,不进行滚动 if (self.itemHeight * self.itemSum <= self.dom.box.outerHeight()){return}; self.prevVal = 'top'; self.nextVal = 'bottom'; self.moveVal = self.itemHeight; }; // 元素:后补 self.dom.list.append(self.dom.list.html()); // 添加元素:手动操作按钮 if (self.settings.prevBtn && !self.dom.prevBtn.length) { self.dom.prevBtn = $('', {'class':'prev'}).prependTo(self.dom.el); }; if (self.settings.nextBtn && !self.dom.nextBtn.length) { self.dom.nextBtn = $('', {'class':'next'}).prependTo(self.dom.el); }; // 事件:手动操作 if (self.settings.nextBtn && self.dom.prevBtn.length) { self.dom.nextBtn.bind('click', function(){ if (!self.lockState) { //alert("下一页"); self.settings.custId++; if (self.settings.custId > self.itemSum) self.settings.custId = 1; //当前item的indx var index = self.settings.custId; //获取下一条item对象 var local = self.dom.list[index + 1]; self.goto(self.nextVal, self.settings.accel); }; }); }; if (self.settings.prevBtn && self.dom.prevBtn.length) { self.dom.prevBtn.bind('click', function(){ if (!self.lockState) { self.settings.custId--; if (self.settings.custId < 1) self.settings.custId = self.itemSum; //alert("上一页"); self.goto(self.prevVal, self.settings.accel); }; }); }; // 事件:鼠标移入停止,移出开始 if (self.settings.hoverLock) { self.dom.box.on('mouseenter', function(){ self.stop(); }); self.dom.box.on('mouseleave', function(){ self.play(); }); }; self.play(); }; // 方法:开始 scroller.play = function(){ var self = this; if (!self.settings.auto) {return}; self.stop(); self.run = setTimeout(function(){ self.goto(); }, self.settings.time); }; // 方法:停止 scroller.stop = function(){ // 立即停止(效果不是很好) // this.dom.box.stop(true); if (typeof(this.run) !== 'undefined') { clearTimeout(this.run); }; }; // 方法:滚动 scroller.goto = function(d, t){ var self = this; var _max; // 滚动的最大限度 var _dis; // 滚动的距离 var _speed = t || self.settings.speed; if (typeof d !== 'string') { d = self.settings.direction; }; self.stop(); self.lockState = true; switch(d) { case 'left': case 'top': _max = 0; if (d === 'left') { if (parseInt(self.dom.box.scrollLeft(), 10) === 0) { self.dom.box.scrollLeft(self.itemSum * self.moveVal); }; _dis = self.dom.box.scrollLeft() - (self.moveVal * self.settings.step); if (_dis % self.itemWidth > 0) { _dis -= (_dis % self.itemWidth) - self.itemWidth; }; if (_dis < _max) { _dis = _max; }; self.dom.box.animate({ 'scrollLeft': _dis }, _speed, self.settings.easing, function(){ if (parseInt(self.dom.box.scrollLeft(), 10) <= _max) { self.dom.box.scrollLeft(0); }; }); } else { if (parseInt(self.dom.box.scrollTop(), 10) === 0) { self.dom.box.scrollTop(self.itemSum * self.moveVal); }; _dis = self.dom.box.scrollTop() - (self.moveVal * self.settings.step); if (_dis % self.itemHeight > 0) { _dis-=(_dis%self.itemHeight)-self.itemHeight; }; if (_dis < _max){ _dis = _max; }; self.dom.box.animate({ 'scrollTop': _dis }, _speed, self.settings.easing, function(){ if (parseInt(self.dom.box.scrollTop(), 10) <= _max) { self.dom.box.scrollTop(0); }; }); }; break; case 'right': case 'bottom': _max = self.itemSum * self.moveVal; if (d === 'right'){ _dis = self.dom.box.scrollLeft() + (self.moveVal * self.settings.step); if (_dis % self.itemWidth > 0) { _dis -= (_dis % self.itemWidth); }; if (_dis > _max){ _dis = _max; }; self.dom.box.animate({ 'scrollLeft': _dis }, _speed, self.settings.easing, function(){ if (parseInt(self.dom.box.scrollLeft(), 10) >= _max) { self.dom.box.scrollLeft(0); }; }); } else { _dis = self.dom.box.scrollTop() + (self.moveVal * self.settings.step); if (_dis % self.itemHeight > 0){ _dis -= (_dis % self.itemHeight); }; if (_dis > _max){ _dis = _max; }; self.dom.box.animate({ 'scrollTop': _dis }, _speed, self.settings.easing, function(){ if (parseInt(self.dom.box.scrollTop(), 10) >= _max) { self.dom.box.scrollTop(0); }; }); }; break; default: return; }; self.dom.box.queue(function(){ self.lockState = false; self.play(); $(this).dequeue(); }); }; scroller.init(); }; // 默认值 $.cxScroll.defaults = { direction: 'right', // 滚动方向 easing: 'swing', // 缓动方式 step: 1, // 滚动步长 accel: 200, // 手动滚动速度 speed: 800, // 自动滚动速度 time: 4000, // 自动滚动间隔时间 auto: true, // 是否自动滚动 hoverLock: true, // 鼠标移入移出锁定 prevBtn: true, // 是否使用 prev 按钮 nextBtn: true, // 是否使用 next 按钮 custId:0 }; $.fn.cxScroll = function(settings, callback){ this.each(function(i){ $.cxScroll(this, settings, callback); }); return this; }; }));