本章主要内容是完成这个轮播图组件~
-
首先来修复一下上两个章节中的bug，滚动顶部菜单时，轮播图部分也会被滚动。原则上来说菜单和轮播图的滚动互不影响。这是由于Scrollable-tab中的ul没设置overflow-x样式。修改如下：
17-1.gif -
修改图片样式
17-2.gif -
自定义图片高度
把轮播图中的高度设为自定义属性，那么其它组件调用时可根据需求传入高度。
17-3.gif -
自动轮播
每隔2秒指定滚动位置，自动滚动用到HTML中的scrollLeft属性（具体可自行查资料）。
17-4.gif
但是从示例中可以看出，轮播到最后一张图之后就停止了，不再滑动了。如何处理这个问题呢？简单的方法就是：取余
再来看一下效果
17-5.gif
-
图片切换动画
更改image-slider样式，让其平滑切换。
17-6.gif
但是此时如果手动切换，图片可能会停在中间。如何处理呢?
添加吸附效果看一下
17-7.gif
此时呢，还有一个问题，假设目前在第二张图片上，如果手动往前滑一下，应该跳回第一张图片，但目前也会直接跳到第三张图片。所以我们需要控制scroll事件，同时需要考虑数组越界的处理。
17-8.gif
6.indicator
indicator应该随着图片的轮播也会转换，并且我们希望在当前索引时，indicator是红色的。
17-9.gif
7.最后处理一下内存泄漏问题
当使用setTimeout，setInterval等这些方法后，需要注意内存泄漏的问题。
17-10.gif
至此，轮播图就全部完成了。
