您现在的位置是：网站首页> 编程资料编程资料

Vue手写横向轮播图的实例_vue.js_

2023-05-24 331人已围观

简介 Vue手写横向轮播图的实例_vue.js_

前提：自己封装的轮播图，暂时没测出bug~

效果如下图，一行三个，点击上一张/下一张向前或向后移动一格,窗口缩放会适当变形，不影响切换

很多页面里，项目里，轮播图几乎是无处不在，今天我们就来说说轮播图的写法

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

展示代码

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：JS获取当前时间实例代码(年月日时分秒)_javascript技巧_