0.0.1 • Published 5 years ago
react-slider3d-fjj v0.0.1
通过CSS、react框架写的简单的3D轮播图组件
之前用原生JS、react组件都实现了平面轮播图,这次通过CSS和react框架的配合写出的简单的3D轮播图组件。
需求文档
- 需求
- 能够实现重后往前规律性滚动轮播。
- 鼠标放到图片上会停止轮播。
- 视觉看出3d的效果。
- 点击图片能够跳转到相对的地址。
- 开发需求
- 支持图片和点击链接的配置。
- 支持轮播图框架显示内容的更换。
- 支持轮播过渡时间的配置。
- 支持轮播间隔时间的配置。
- 支持轮播图所在容器的配置。
设计方案
- 定义一个轮播图组件类。
- 实例化一个轮播图对象,接收一些外部属性props :
- list
- text : 图片地址。
- href : 跳转链接。
- intervalTime
- 轮播的间隔时间。
- transitionTime
- 轮播过渡的间隔时间。
- width
- 显示容器或图片的宽度。
- height
- 显示容器或图片的高度。
- list
初始化方法
- 定义一个state对象,用 index 属性计数。
第一次渲染前方法做的几件事情
- 定义图片的宽度和高度。
- 添加一个定时器
- 添加定时器执行的loop方法
- 在轮播图容器中加一个过度动画结束的事件监听器,每当过渡动画结束时候再启动一个定时器,接着执行loop方法。
loop 方法
- 定义了轮播的过渡时间。
- 定义了轮播图旋转的间隔时间。
- 每次轮播完成后 index 数据就会加1。
渲染方法做的事情
- 生成轮播图。
- 添加轮播图的点击事件,鼠标左键点击轮播图中的图片时会跳转相应地址链接。
- 添加鼠标移入事件,鼠标移入时会停止轮播,鼠标离开时会启动定时器继续轮播。
编码实现
- 定义react组件类的方法。
- 利用react的componentDidMount生命周期。
- 利用setTimeout定时器。
- 利用this.props传递组件所需要的属性。
- 利用addEventListener添加监听事件。
- 利用CSS中transform-style设置3d效果,利用transform中的平移、旋转的属性。
0.0.1
5 years ago