淘宝轮播图

动态生成小圆圈:

核心思路：小圆圆的个数要跟图片张数一致。

所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数）

利用循环动态生成小圆圈（这个小圆圈要放入ol里面）

创建节点createElement('li')

插入节点ol.appendChild(li)

点击小圆圆滚动图片：

此时用到animate动画函数，将js文件引入(注意，因为index.js依赖animate.js 所以animate.js要写到index.js上面)

使用动画函数的前提：该元素必须有定位。

注意是ul移动而不是li

滚动图片的核心算法：点击某个小圆圈，就让图片滚动 小圆圈的索引号乘以图片的宽度作为 ul移动距离

点击右侧按钮一次，就让图片滚动一张。

声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离。

图片无缝滚动原理：

把ul第一个li复制一份，放到ul的最后面。

当图片滚动到克隆的最后一张图片时，让ul快速的，不做动画的跳到最左侧：left为0

同时num复制为0，可以重新开始滚动图片了。

克隆第一张图片

克隆ul第一个li cloneNode() 加true深克隆 复制里面的子节点 false浅克隆

添加到ul最后面 appendChild

点击右侧按钮，小圆圈跟随变化。

最简单的做法是再声明一个变量circle，每次点击自增1，注意，左侧按钮也需要这个 变量，因此要声明全局变量。

完成如上的步骤之后，仍然会有几个bug 比如 点击到第5个小圆圈时，点下一张，就会跳到第2个图片。

使num = index之后还有一个bug

所以需要将circle的值也赋值为index

自动播放功能：

1.添加一个定时器

2.自动播放轮播图，实际就类似于点击了右侧按钮

3.此时我们使用手动右侧按钮点击事件 arrow_r.click()