[vue组件]无缝轮播图

最新推荐文章于 2025-06-25 11:11:50 发布

转载最新推荐文章于 2025-06-25 11:11:50 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011584322

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue实现一个简洁且易于定制的基础轮播图组件。通过在图片数组首尾添加元素达到无缝滚动效果，并利用Vue的特性完成平滑过渡动画。文中详细解释了数据绑定、边界判断等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该文章请对应源码阅读，github源码地址，DEMO使用地址，线上DEOM展示。

做一个vue基础组件系列，使用vue以最简洁的方式实现常用组件，可用于快速二次定制化开发。

(๑•̀ㅂ•́)و✧不定时更新，欢迎 star，讨论，指教。

实现原理

1. 无缝滚动预处理

为了无缝滚动，在传进来的imgs数组首部增加末尾元素，在尾部追加首元素,看图1

2. 数据绑定视图

（1）activeIndex为当前显示的轮播图索引，然后只需要对activeIndex进行操作，watch监听activeIndex的变化，一旦到达了边界就重置activeIndex，显示出对应的图片。过渡动画则由css3的transition属性完成。
（2）isResetIndex为watch监听的activeIndex变化时，判断此次变化是否activeIndex已经到达了边界，如果是则为true，同时需要重置activeIndex（且此过程为瞬间完成，无过渡动画，详情见图2），反之false