Angular8 实战（十七）轮播图组件

本章主要内容是完成这个轮播图组件~

1. 首先来修复一下上两个章节中的bug，滚动顶部菜单时，轮播图部分也会被滚动。原则上来说菜单和轮播图的滚动互不影响。这是由于Scrollable-tab中的ul没设置overflow-x样式。修改如下：

   
   
   17-1.gif

2. 修改图片样式

   
   
   17-2.gif

3. 自定义图片高度
   把轮播图中的高度设为自定义属性，那么其它组件调用时可根据需求传入高度。

   
   
   17-3.gif

4. 自动轮播
   每隔2秒指定滚动位置，自动滚动用到HTML中的scrollLeft属性（具体可自行查资料）。

   
   
   17-4.gif

但是从示例中可以看出，轮播到最后一张图之后就停止了，不再滑动了。如何处理这个问题呢？简单的方法就是：取余
再来看一下效果

17-5.gif

5. 图片切换动画
   更改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

至此，轮播图就全部完成了。