之前一直都没有认真的写过一个组件。以前在写业务代码的过程中，都是用的别人封装好的组件，这次尝试着写了一个图片轮播组件，虽然比不上知名的轮播组件，但它的功能基本完整，而且在写这个组件的过程中，学的东西也很多，在这里也给大家分享出来，如有疏漏，欢迎指正！
在制作这个组件之前，笔者google了不少关于轮播的文章，发现实现一个轮播的思路虽然各有不同，但是大的逻辑其实差不多，本文主要依据慕课网上焦点轮播图特效这节课，不过慕课网主要用原生JS写，而笔者则用Vue进行了重构，并且进行了一点修改。完成后的组件效果图如下：
一、理清思路，理解需求和原理
1. 要写一个什么样的轮播？
在点击右侧箭头时，图片向左滑动到下一张；点击左侧箭头时，图片向右滑到下一张
点击下面的小圆点，滑到对应的图片，相应小圆点的样式也发生改变
要有过渡效果，要缓缓滑动过去
当鼠标hover到图片上时，轮播暂停，当鼠标leave时，轮播继续
自动播放功能
无限滚动，即在滚动到最后一张时，再点击下一张时会继续向左滑动到第一张，而不是整个拉到第一张，这里有点难
2. 理解无限轮播的原理
我们先看下原理图：
图中红线区域即是我们看到的图片，这个轮播 只展示5张图片 ，但是在它的首尾各还有两张图片，在图1前面放置了图5，在图5后面放置了图1，之所以这么做，是为了做无限滚动。 无限滚动的原理在于：当整个图向左侧滚动到右边的图5时，会继续向前走到图1，在完全显示出图1后，会以肉眼看不到的速度向右侧拉回到最左边的图1。 这样，即使再向左侧滑动看到的就是图2了。
如下图：在最后的图1完成过渡完全显示出来后，再将整个列表瞬间向右拉到左侧的图1。另一张边界图图5的滚动也是，不过方向相反。
二、先让图片切换起来
1. 布局和准备
<template>
<div id="slider">
<div class="window"> // window上图中红线框
<ul class="container" :style="containerStyle"> //注意这里的:style //这是图片列表，排成一排
