轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效.轮播图的插件也有很多,用jQuery写起来也不难.这里分享一个使用vue的轮播图效果.可以点击连接查看效果vue实现轮播图
以上的效果主要模仿自小米商城,里面的图片也来源于此.轮播的效果是淡入淡出效果,采用的是vue的过渡transition,结合css3动画实现.
这里可以查看源代码,源码采用vue-cli构造,主要内容在slide组件中,,可以直接复制slide组件的内容,在要使用的地方,注册slide组件,HTML结构里面直接写上slide标签即可.可自定义轮播图的大小,轮播速度,传vue的props属性,对应inv,styleObject中的宽高.
<slide :slides="slides" :inv="inv" :style="styleObject"></slide>
<script>
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'
}
}
}
}
</script>
