利用 vue 过渡效果（transition）定时器 实现轮播

轮播图 相信都不会陌生，很多的网站都会有，本文就是用 vue 自带的 transition 动画过渡效果加上定时器来编写一个轮播图。

1、功能分析。

从轮播常用功能来说有四个功能：

1. 自动的轮播的功能；
2. 点击左右箭头（pre、next）进行的切换；
3. 点击数字切换到对应的图片的功能；
4. 鼠标悬停、移出控制轮播图的开始、暂停；

2、场景介绍、分析。

环境是 vue 组件的形式，轮播图模块是以组件的形式，内嵌在父组件中。这样的好处是轮播图功能，低耦合，复用性高，即插即用。这边我将轮播图的组件取名为 slide.vue，父组件为product.vue。

3、源码分析。

Step1. 父组件product.vue

<template>
	<div class="index-wrap">
		<div class="index-right">
			<slide-show :slides="slides" :inv="slideSpeed"></slide-show>
		</div>
	</div>
</template>

<script>
import slideShow from './slide.vue'
	export default {
		components:{
			slideShow
		},
		data () {
			return {
				slideSpeed:2000,
				slides:[
					{
						src:require('../assets/slide/pic1.jpg'),
						title:'xxx1',
						href:'https://www.baidu.com/'
					},
					{
						src:require('../assets/slide/pic2.jpg'),
						title:'xxx2',
						href:'https://www.baidu.com/'
					},
					{
						src:require('../assets/slide/pic3.jpg'),
						title:'xxx3',
						href:'https://www.baidu.com/'
					},
					{
						src:require('../assets/slide/pic4.jpg'),
						title:'xxx4',
						href:'https://www.baidu.com/'
					}

				]
			}
		}
	}
</script>

<style scoped>
.index-wrap {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.index-left {
  float: left;
  width: 300px;
  text-align: left;
}
.index-right {
  float: left;
  width: 900px;
}
.index-left-block {
  margin: 15px;
  background: #fff;
  box-shadow: 0 0 1px #ddd;
}
.index-left-block .hr {
  w