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

作者：羊村懒王 | 2024-03-16 17:31:21

踩

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}}

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/251034