序论:
轮播图 相信都不会陌生,很多的网站都会有,而且实现的方式也是千变万化,可以利用封装好的 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"