slide

第一版Slider完毕 -- by yangrong

第一种运动方式————前后补位

1. 将第一个元素,复制并插入到队列的最后。队列本身的最后一个元素复制，放在队列的最前方。
2. 每次点击鼠标移动 margin-left：index*winth的长度，从队列的最后一个节点到第一个节点的时候，首先最后一个节点平移到复制，原先第一位节点的最后一位，在回调函数的时候，将ul的这个队列的margin，left，调整到，队列原先的第一个节点的位置。
3. 用开关的方式，解决了，快速点击

缺点：

1. 比如当画面很多时，从第一个节点，移动到最后一个节点的时候，会眼花。
2. 用开关解决了，快速点击，比较迟钝。

第二种运动方式————每次先插入当前节点的前（后），再向右（左）移动。

解决上一个运动方式的两个对应的问题

1. 解决从1——5快速滑动，太快，有点晕这个问题。
2. 用jquery提供的 stop(true,true);来坚决快速点击的问题，体验会比用开关的好一点。

流畅动画，流畅切换，自定义第一个聚焦的画面，lazyload，判断动画是否运动。

1. 先把最原始的 ul>li的序列索引记录在一个变量里，以便我们每次准确取出指定的下一个的元素。

2. 记录当前的显示的节点，每次指点要运动的下一个节点，基于当前节点插入。

3. 每次取出移入的时候，从前（后）面放入当前节点，判断是否在当前节点的后（前）方，放入后，运动前，要改变marginleft的值，给放入的节点预留位置。

4. 之前在早期版本中，导航条是动态生成的，考虑最好是把html结果，和js结构尽量独立，且导航条的形式，不只是ul>li 还有可能是div，span或者是其他的结构，不是很好把握，所以组件部分，只是对导航的切换效果，移入导航节点切换对应动画做了处理。

5. 独立相应功能的模块，动画做一个模块，导航条切换效果作为一个模块，等。

6. 关于clearInterval，这里的处理方式，比较笨拙，就是移入这个区域（导航条，包括滑动区域），就clearInterval，离开滑动区域，就继续开始。（开始的处理方案是，离开动画区域，setInterval，移入开动画区域clearInterval，同事导航条也做相同的处理，这样会导致，这个运动停止，开始错乱）。

7. 添加img的lazyload

8. 添加判断是否有交集，再进行动画。

9. 除了 stop(true,true)，之外，其他处理方式。具体:见1.8演示,主要思路是讲 this.fouseNum（记录当前视图画面的索引值），动画的回调函数时，再把this.fouseNum的值更新，这样就可以保证插入的元素一直是没进行完动画时要插入的元素

动画原理图片说明