vue项目实战之不用UI框架自己手写一个轮播图

在实际开发项目时，为了追求开发速度，我们可以直接用UI库里别人封装好的轮播图，然后修修改改就能套出来。今天我们学习一下不用UI框架，自己在vue项目中手写一个轮播图，先来看下效果图，如下，每隔2秒图片自动从左向右轮播:

实现的整体思路：

组件挂载完成后执行一个play方法，采用定时器，每隔2秒就调用一下autoPlay函数方法，如果ni就显示当前索引对应的那张图片，并且ni时就把小圆li添加一个类名selected，即选中时的样式，最后把组件抽离封装出来，在父组件data里的imgArrs变量里存放图片，当然如果这个图片是后端返回给我们的，我们只需要请求拿到图片数据后再赋值给imgArrs即可。在Home.vue的子组件Banner.vue里用props接收传过来的图片数据，再用v-for遍历渲染出来，v-show=“n==i”控制显示当前索引值对应的图片。最后，在destroyed这个生命周期函数里清除定时器。

代码如下:

样式代码如下: