0.0.13 • Published 5 years ago
react-slider-fjj v0.0.13
react 轮播图组件
前段时间使用原生 JS 实现了一个轮播图插件,现在在 React 的基础上,重新实现了一个组件。
正文
本文介绍一个基于 React 框架实现的轮播图组件。
需求文档
- 需求
- 能够实现自左往右规律性轮播。
- 轮播到最后一张图时,能够无缝衔接到第一张图。
- 缩略小圆点能够跟随相对的图片轮播。
- 鼠标放到图片会停止轮播。
- 鼠标点击缩略小圆点轮播图也会跳转的相应的图片。
- 点击图片能够跳转到相对的地址。
- 开发需求
- 支持图片和点击链接的配置。
- 支持轮播过渡时间的配置。
- 支持轮播间隔的配置。
- 支持轮播图所在容器的配置。
- 支持缩略圆点大小、颜色、激活颜色、位置的配置。
设计方案
- 定义一个轮播图组件类。
- 实例化一个轮播图对象,接收一些外部属性 props:
- list
- 图片对象数组
- text:图片地址。
- href:跳转链接。
- 图片对象数组
- intervalTime
- 轮播的间隔时间。
- transitionTime
- 轮播过渡的间隔时间。
- width
- 显示容器或图片的宽度。
- height
- 显示容器或图片的高度。
- list
初始化方法做的事
- 定义一个state对象,用 index 属性计数。
第一次渲染前方法做的几件事情
- 获取数组的长度
- 定义显示容器的大小,
- 定义图片容器的宽度和高度。
- 添加一个定时器
- 添加定时器执行的loop方法
- 在轮播图容器中加一个过度动画结束的事件监听器,每当过渡动画结束时候再启动一个定时器,接着执行loop方法。当轮播到最后一张图片时,设置容器的过度时间为 0 秒,使得容器瞬间跳转到第一张图片所在的位置。index数据也会回到初始值,这样才能达到无缝滚动。
loop方法做的事情
- 定义了除最后一张图片其他图片的过渡时间。
- 定义了除最后一张图片其他图片的平移方向大小。
- 每次轮播完成后index数据就会加1。
渲染方法做的事情
- 生成的显示容器、轮播图容器以及轮播的的图片。
- 添加轮播图的点击事件,鼠标左键点击轮播图中的图片时会跳转相应地址链接。
- 生成缩略小圆点,缩略小圆点会随着轮播图滚动。对应轮播图图片的小圆点为黄色,其余为红色。
- 添加缩略小圆点的点击事件,当鼠标左键点击到红色缩略小圆点的时候,轮播图也会跳转到相应的图片。
编码实现
- 定义react组件类的方法。
- 利用react的componentDidMount生命周期。
- 利用setTimeout定时器。
- 利用this.props传递组件所需要的属性。
- 利用addEventListener添加监听事件。
- 利用CSS中transform和transition的使用方法。