在谈组件之前来谈谈今天遇到搞笑的事情，今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的貌似说我用招商银行信用卡在今年的6月23日借了招商银行19800元人民币，今天是最后一天没有还款，说我其他银行钱都被冻结了。以后有可能法律投诉我！我靠我无语啊我长这么大从来都没有办理过信用卡，我根本就不需要办理信用卡，所以一直以来也没有办过，招商一卡通是有一张但是从来没有借过钱啊，身份证一直都身上带着！基本上没有脱离过身，今天我打电话过去他问我叫什么名字我就报了名字我问是什么情况然后说了很多大概意思就是刚刚上面的意思然后他接着问我身份证号是多少？我就没有告诉他，我今天就半信半疑我到银行取下钱看看是不是真的我的卡被冻结了结果我所有的银行卡都没有被冻结。我怀疑有可能是骗人的，如果有杭州的朋友可以试试打上面的电话然后随便报个假名字让他们查下看看他们怎么说？就知道了！快过年了我也在这希望大家不要被一些人骗了，年底小心骗子(骗子很多的)。不多说了，下面来看看我这个JS效果原理吧！

基本原理

1. 开始获取每次滚动的个数，如果参数item(int整形数字)传进来，就取参数item个数否则的话个数count = 取外层容器宽度(或高度) / 每个li宽度(或高度)。然后判断方向如果是left(向左) 那么父级容器宽度ul * 2，否则的话ul高度*2. 然后计算下一次滚动多少距离。如果方向是left 那么值的计算 = ("li",wrap).outerWidth() * _cache.count(也就是当前一个li的宽度*滚动的个数)。如方向是top 那么值的计算 = ("li",wrap).outerHeight() * _cache.count(一个li的高度*滚动的个数)。

2. 下一页按钮事件的原理：

默认是auto(自动播放)，不断向下一页滚动，_scrollNext函数的原理：如果方向是left 那么marginLeft:动画(animate)移动多少距离。接着回调函数把第一个li插入到最后上面来，且让margin-left:0;接着又执行相应的动作就是一个循环了。同理向上滚动也是这个道理。

3. 上一页按钮事件的原理：

从后面获取几项元素(根据count个数来获取多少个)。接着判断left或者up方向。接着marginLeft或者marginTop，就这样循环。

4. 判断传进来的auto参数如没有传则默认显示true 自动滚动否则的手动滚动。如果是自动的话调用 setInterval 执行 _scrollNext滚动下一页的方法。

示意图如下：

jsfiddle的效果如下链接，可以点击进去看看。

http://jsfiddle.net/longen/3jXFN/embedded/result/

依赖于HTML结构如下

<div id="example">
     <div class="scroll">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
     </div>
     <span class="prev">前一个</span>
     <span class="next">下一个</span>
 </div>

如果没有上下页的话上下页按钮可去掉HTML代码。

可配置的参数如下

targetElem	目标元素默认为空需要传入
direction	'left', // 默认方向为left 或者自定义 up
btnPrev	'.prev', // 上一页按钮
btnNext	'.next', // 下一页按钮
auto	true, // 默认为true 自动播放
item	null, // 一次滚动多少个
speed	"1000", // 设置每次滚动动画执行时间(单位毫秒，默认为1000)；
time	"3000", // 设置每次动画执行间隔时间(单位毫秒，默认为3000)；
callback	null // 点击上一页或者下一页回调