vue 实现无限轮播_用vue写一个轮播图效果

轮播图在网站中几乎无处不在，占用地方少，交互性好。今天就来聊聊如何用vue实现一个轮播效果。

一、原理

在轮播图数组dataList中，定义一个变量currentIndex = 0表示第一张图片，默认渲染第一张图片即dataList[currentIndex]，然后获取每张图片的下标。点击切换图片时把当前图片的下标赋值给currentIndex即可实现图片切换显示。

二、定义变量

data: {

dataList:["https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg","https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg","https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg"],

currentIndex: 0, //默认显示图片

timer: null //定时器

}

三、模板渲染

• <
• { {index+1}}
• >

四、点击小圆点切换图片

{ {index+1}}

在li标签里执行一个点击函数&#x