手写一个简单的Swiper

date

Apr 27, 2023 02:36 AM

type

status

slug

summary

前言

起初我是要编写一个画布的组件功能的。考虑到目前我的项目代码有vue2,vue3，本人还在学习React。所以我想编写一个可以不受框架限制的组件。正好借着这个机会学习一下面相对象开发组件。

分析组件需求

这一步要明确组件需要哪些基本功能。首先从使用方面来说，只需要满足指定的dom就行，然后就是满足基本的轮播图功能。那么使用场景和需求确定了。下面就初步构想下组件的功能了。

使用一个Swiper类来编写，这样就可以在new的时候传入已经存在的dom结构，来生成组件

dom结构我参考了知名开源项目Swiper的结构。

下面之后的想法是在项目开发过程中改进的。

外部传入参数来控制自动轮播图或者轮播图的切换事件

添加了新的轮播图或者轮播图切换的时候对外部进行通知

开始之前: `SwiperOptions`

在开始创建我们的 Swiper 类之前，首先需要设定一个名为 SwiperOptions 的预定义接口。这个接口收纳了我们的轮播器中需要的配置，包括是否启动自动播放 (autoplay)、播放间隔 (delay)、是否显示分页指示器 (pagination)，及用户交互行为的启用 (enablePlay 和 enablePagination)。我们同样还定义了两个回调函数，onSlideAdded 和 onSlideChanged，以便有新图片添加或者当前图片更换时触发。

核心功能: `Swiper` 类

接下来就是我们的主角，Swiper 类。它需要接收一个HTML元素（或其选择器），以及我们刚才定义的 SwiperOptions 接口作为构造函数的参数。在这个类中，我们会获取并设置图片容器，轮播元素，以及其他相关参数。

我们的轮播器中提供了三个关键的方法在进行图片切换操作：slideToNext，slideToPrev 和 slideTo ，这三个方法分别用于切换到下一张、上一张或指定索引的图片。并且与一个数据 currentSlideIndex 携手工作，准确地记住和展示当前的图片。

动态添加和删除

为了允许图片的动态增删，我们采用了 MutationObserver 来监视DOM的变化。在新的图片添加或移除时，相应的方法 handleSlideAdded 和 handleSlideDeleted 会被调用，这样就能动态地刷新轮播器的状态，并触发对应的轮播器事件。

自动播放与悬停停止

此外，我们的轮播器还具备自动播放的特性。在配置中讲 enablePlay 和 autoplay 设为 true，并指定合适的 delay 延迟时长，轮播器就会自动切换图片了。为了用户体验，当鼠标指针移动到轮播器上时，自动播放会被暂停，鼠标离开又会恢复。

个性化定制

最后，为了做到个性化定制，我们可以提供更多的自定义配置选项，通过直接调整 SwiperOptions 接口或者继承并扩展Swiper类中的方法来实现。

详细代码

结语

这只是一个菜鸟的开发学习过程，如果有更好的改进代码的方法，希望各位大佬不要惜言。

前言