无限轮播图的制做

url： http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html

（若是打开过慢，或者打不开，缘由你懂得。）

1、思路

一、全部滑动效果的demo都是经过控制css里的left值，来控制滑动效果的。

二、须要两个块，一个div块，一个ui。div块的position是relative，ui块的position是absolute。这样ui块的left就能够根据外层的div来控制。div的overflow是hidden，由于ui里面的li的float是left的，ui的宽度一定比div宽，可是要保证只显示一张图，因此超出div的部分隐藏掉。

三、两个按钮，这两个按钮，无非就是控制UI的left值变化，以每一张图的宽度为限，进行加或减的运算。

四、所谓无限轮播，只是在不停点击按钮的时候，图片会一直向左，或者向右转动，而不是像某些轮转图，当到达零界点时，发生跳转。这个时候，咱们就要复制第一张图，把第一张插入整个ui的最后，把最后一张图，复制插入整个ui的首位。当点击到咱们复制的图片时，就直接定位到，最后一张图，或者第一张图。这种快速的定位，不会有任何间隙的产生。

五、自动播放，也就是当页面载入的时候，设定一个定时器，让这个定时器，调用自身。定时器的fn没法就是点击按钮，让图片本身转动起来。

六、当鼠标移入时，中止定时器，当鼠标移出的时候，启动定时器。

七、当点击按钮的时候，判断当前是否处于动画状态，处于动画状态，就移除对left的控制，不处于动画状态，就执行对left的控制，这个主要是考虑到，当用户不停地点击按钮时，图片会不停的轮转，点击了多少次，就执行多少次点击函数。这是一种很差的用户体验。

2、代码

具体效果代码。能够点击上面的url，查看推敲，我是用avalon和jquery结合作的。

3、总结

一、基本上全部的动画效果，都是经过控制css属性来实现的，无论是渐变、滑动、切换、弹出、消失、隐藏。js只是实现一个控制的功能。

二、对于组件使用的见解，js的ui组件不少，个人见解是，项目中有自信的能够本身作，没自信的就用，比较一个好的ui库是比本身写的完善不少的，项目不是让本身练手的东西。本身的小demo，能够用js原生来写，用jq来写，都随意，这是体现本身实力的东西。

<--待完善-->

忽然发现一些小BUG，基本想法就是这样，待我填坑。

来自为知笔记(Wiz)