用vue实现一个相册网页_用vue实现一个轮播图slider

轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效.轮播图的插件也有很多,用jQuery写起来也不难.这里分享一个使用vue的轮播图效果.可以点击连接查看效果vue实现轮播图

以上的效果主要模仿自小米商城,里面的图片也来源于此.轮播的效果是淡入淡出效果,采用的是vue的过渡transition,结合css3动画实现.

这里可以查看源代码,源码采用vue-cli构造,主要内容在slide组件中,,可以直接复制slide组件的内容,在要使用的地方,注册slide组件,HTML结构里面直接写上slide标签即可.可自定义轮播图的大小,轮播速度,传vue的props属性,对应inv,styleObject中的宽高.

import slide from '@/components/slide.vue'

export default{

components: {slide},

data () {

return {

slides: [

{

src: 'http://i3.mifile.cn/a4/xmad_14913974588712_tsRvc.jpg'

},

{

src: 'http://i3.mifile.cn/a4/xmad_14915894814419_zNYsr.jpg'

},

{

src: 'http://i3.mifile.cn/a4/xmad_14913784864515_mkpqH.jpg'

},

{

src: 'http://i3.mifile.cn/a4/xmad_14908694250786_fObqa.jpg'

},

{

src: 'http://i3.mifile.cn/a4/xmad_14913755624659_gRtNH.jpg'

}

],

inv: 2000,

styleObject: {

width: '1226px',

height: '460px'

}

}

}

}