前端框架Vue（14）—— 利用 vue 过渡效果（transition）+定时器 实现轮播图通用组件

序论：

    轮播图 相信都不会陌生，很多的网站都会有，而且实现的方式也是千变万化，可以利用封装好的 UI 库 （bootstrap），

也可以原生的 JS 进行编写。但是其中，动画（transition）和定时器都是必不可少的。本文就是利用 vue 自带的 

transition 动画过渡效果加上定时器编写轮播图。

效果：

---

1、功能分析。

从上面的效果图中看，有四个基本功能：

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

---

2、场景介绍、分析。

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

---

3、源码分析。

1、父组件 app.vue。

<template>
    <div id="WBAQPage" class="WBAQPage">
        <carousel :slides="slides" :inv="invTime"></carousel>
    </div>
</template>
<script>
import carousel from '../../components/Carousel.vue'
    export default {
        data () {
            return {
                invTime: 2000,
                slides: [
                    {
                        src:require('../../assets/pic1.jpg'),
                        title:'xxx1', 
                    },
                    {
                        src:require('../../assets/pic2.jpg'),
                        title:'xxx2'
                    },
                    {
                        src:require('../../assets/pic3.jpg'),
                        title:'xxx3'
                    },
                    {
                        src:require('../../assets/pic4.jpg'),
                        title:'xxx4'
                    }
                ]
            }
        },
        components: {
            carousel
        }
    }
</script>
<style scoped>

</style>

父组件中主要有三件事：

1、import 引入子组件进行显示。
2、将归纳轮播图属性的数组 slides 传给子组件。
3、将轮播间隔的时间参数 invTime 传给子组件。

2、子组件 Carousel.vue

<template>
  <div class="slide-show"