先起个名字
当然插件得有个名字，而且得有个文件名。按行规：
名字应该是jQuery-xxxx
文件名应该是jQuery.xxxx.js和jQuery.xxxx.min.js
尽量别跟github上的别的项目重名，除非你的插件能牛逼到成为github里的首选。
现在我准备写一个jQuery走马灯插件，我搜了一下github，最终插件定名jQuery-scrollingmarquee，文件名定名jquery.scrollingmarquee.js和jquery.scrollingmarquee.min.js。
这个插件的灵感来自于我的文章：《根本不用插件，实现jQuery横/纵向走马灯》
编写手册
接下来就开始写手册。没错，插件虽然还没开发，但是手册必须先编写出来，这就是计划。这个手册是给用户看的，也是你要最终实现的。
HTML代码准备
就像上文我在《根本不用插件，实现jQuery横/纵向走马灯》说的，必须先准备ul>li。
<div class="scrollingmarquee">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
要求使用者先创建类似上面的HTML结构。注意上面的那个div.scrollingmarquee，必须作为ul元素的父元素，它用于遮挡溢出的li元素。然后让使用者给ul元素自定义一个id属性。本文假定用户给ul元素定义的id值为sm。
CSS代码准备
给用户提供基本的CSS代码。
.scrollingmarquee {
width: 100%; /* 或视具体情况而写，应保证是li元素宽度的整数倍 */
height: 100%; /* 或视具体情况而写，应保证是li元素高度的整数倍 */
overflow: hidden;
}
.scrollingmarquee ul {
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
.scrollingmarquee li {
display: block;
list-style: none;
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: red;
}
/* 下面这个重置声明请按需设置，如果希望全部保持默认，请直接删掉整个重置声明 */
#sm li {
width: 25%; /* 这个值由使用者自行计算，支持设置绝对单位和相对单位，例如一行4个li，则这里可写25% */
height: 50%; /* 这个值由使用者自行计算，支持设置绝对单位和相对单位，例如希望同时显示两行，则这里可写50% */
float: left; /* 仅当向右滚动时，此处改成right */
}
基本使用方法
不带任何参数，也就是全部采用默认参数。关于参数，在下面讲。
$('#sm').scrollingmarquee();
高级使用方法
$('#sm').scrollingmarquee({
parameter: value,
......
});
属性列表
根据《根本不用插件，实现jQuery横/纵向走马灯》我们来分析、总结一下属性：
.scrollingmarquee( options )
options
属性名：direction
解 释：滚动的方向，默认为left。可选值：top、left、right。
类 型：String属性名：totaltime
解 释：单次滚动+单次停顿的用时，单位毫秒。默认值为2000，也就是2秒。
类 型：Number属性名：scollingtime
解 释：仅单次滚动的用时，单位毫秒。数值可等于但不得大于totaltime，否则按totaltime值计。当数值等于totaltime值时，意味着不停顿连续滚动。当不停顿连续滚动时，“scollingtime”或“totaltime”的值的存在意义在于设置li元素的初始静止状态会维持多久时间。默认值为1000，也就是1秒。如果“totaltime”的值也保持默认，表现就是滚动1秒停顿1秒，以此循环。
类 型：Number属性名：columns
解 释：表示ul元素内有几列li元素，默认值为1，即ul有1列li元素。为保证视觉效果，此属性的值必须为正整数，通常取1、2、3、4这样的数字。在设置“columns”的值之前，请确认书写了上面CSS代码的重置声明。
类 型：Number属性名：rows
解 释：表示可同时露出几行li元素（仅用于纵向滚动的情况），默认值为1，为保证视觉效果，此属性的值必须为正整数，通常取1、2、3这样的数字。在设置“rows”的值之前，请确认书写了上面CSS代码的重置声明。
类 型：Number
有一个在《根本不用插件，实现jQuery横/纵向走马灯》存在的CSS属性我没有列出，就是li的margin值。因为我在那篇文章中为了美观，又能最简化CSS，所以临时用了li的margin值，但其实是不规范的。写插件的时候，应该将li的margin重置为0，因为li只是表示列表的语义，不要直接给它加过多的样式，而且方便计算每个li的宽度值。同时插件不要给li设置padding，而是建议使用者给li内部的元素加margin。
开工写插件
(function ($) {
// 默认参数（放在插件外面, 避免每次调用插件都调用一次, 节省内存）
var defaults = {
direction: 'left',
totaltime: 2000,
scollingtime: 1000,
columns: 1,
rows: 1
};
// 扩展
$.fn.extend({
//定义插件方法
scrollingmarquee: function(options) {
// 覆盖默认参数
var opts = $.extend(defaults, options);
// 简单判断用户定义的参数的有效性，这里可以将错误输出到控制台，但是我现在为了快速示范，就先不管报错，判断也只是粗略判断
if ( !opts.direction || !/^(top|left|right)$/.test(opts.direction) ) {
opts.direction = 'left';
}
if ( !opts.totaltime || typeof (opts.totaltime - 0) !== 'number' || (opts.totaltime - 0) % 1 !== 0 ) {
opts.totaltime = 2000;
}
if ( !opts.scollingtime || typeof (opts.scollingtime - 0) !== 'number' || (opts.scollingtime - 0) % 1 !== 0 ) {
opts.scollingtime = 1000;
}
if ( !opts.columns || typeof opts.columns !== 'number' || (opts.columns - 0) % 1 !== 0 ) {
opts.columns = 1;
}
if ( !opts.rows || typeof opts.rows !== 'number' || (opts.columns - 0) % 1 !== 0 ) {
opts.rows = 1;
}
// 主函数
var that = this,
liwidth = $(this).width() / opts.columns,
liheight = $(this).height() / opts.rows,
easing = opts.totaltime != opts.scollingtime ? 'swing' : 'linear';
if ( opts.direction === 'left' ) {
$('.scrollingmarquee ul').css('width', '200%');
setInterval(function() {
$(that).animate({"margin-left": "-" + liwidth + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li:eq(0)").appendTo($(that))
.end().end().css({"margin-left": 0});
});
}, opts.totaltime);
} else if ( opts.direction === 'right' ) {
$('.scrollingmarquee ul').css('width', '200%');
setInterval(function() {
$(that).animate({"margin-left": liwidth + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li:eq(0)").appendTo($(that))
.end().end().css({"margin-left": 0});
});
}, opts.totaltime);
} else if ( opts.direction === 'top' ) {
setInterval(function() {
$(that).animate({"margin-top": "-" + liheight * opts.rows + "px"}, opts.scollingtime, easing, function() {
$(that)
.find("li").slice(0, opts.columns * opts.rows).appendTo($(that))
.end().end().end().css({"margin-top": 0});
});
}, opts.totaltime);
}
}
});
})(jQuery);
简单说一下。
0、为了简单起见，没有考虑用户把鼠标悬停到走马灯的时候暂停走马灯的情况。
1、先写个自执行函数，把jQuery对象传进去。
2、定义默认参数值。
3、给$定义一个插件方法。我们这个叫scrollingmarquee。
4、覆盖默认参数。这里利用的是jQuery自带的.extend()，它的作用是合并对象。
5、简单判断一下参数值的合法性，不合法的话最好是打印出来。只用考虑用户不小心设置错参数值，而不用过多考虑用户会恶意设置参数的值，咱这只是个前端插件而已。
6、this指向的是插件方法的$对象，现在既然有一个setInterval()方法，为了简单传递this的指向，可以写一句var that = this。
7、主函数很容易理解，不解释了。其中$('.scrollingmarquee ul').css('width', '200%');是向左或者向右滚动的时候，ul的宽度必须是200%，原因见《根本不用插件，实现jQuery横/纵向走马灯》。
8、到这里，这个插件就写完了，是不是很简单。如果想保证链式操作，那么在scrollingmarquee方法的函数内最后写一句：return this;就OK了。
使用插件
给一个范例：往上滚动，每行4个li，同时可露出2行li，初始2秒后开始不停顿滚动。
首先编写HTML代码，和重置CSS代码，方法见上面CSS代码片段的注释。
JS代码：
$("#sm").scrollingmarquee({
direction: 'top',
columns: 4,
rows:2,
totaltime: 2000,
scollingtime: 2000
})
