通过CSS、react框架写的简单的3D轮播图组件

之前用原生JS、react组件都实现了平面轮播图，这次通过CSS和react框架的配合写出的简单的3D轮播图组件。

• 源码

• 演示

需求文档

• 需求
  • 能够实现重后往前规律性滚动轮播。
  • 鼠标放到图片上会停止轮播。
  • 视觉看出3d的效果。
  • 点击图片能够跳转到相对的地址。
• 开发需求
  • 支持图片和点击链接的配置。
  • 支持轮播图框架显示内容的更换。
  • 支持轮播过渡时间的配置。
  • 支持轮播间隔时间的配置。
  • 支持轮播图所在容器的配置。

设计方案

• 定义一个轮播图组件类。
• 实例化一个轮播图对象，接收一些外部属性props :
  • list
    • text : 图片地址。
    • href : 跳转链接。
  • intervalTime
    • 轮播的间隔时间。
  • transitionTime
    • 轮播过渡的间隔时间。
  • width
    • 显示容器或图片的宽度。
  • height
    • 显示容器或图片的高度。

初始化方法

• 定义一个state对象，用 index 属性计数。

第一次渲染前方法做的几件事情

• 定义图片的宽度和高度。
• 添加一个定时器
• 添加定时器执行的loop方法
• 在轮播图容器中加一个过度动画结束的事件监听器，每当过渡动画结束时候再启动一个定时器，接着执行loop方法。

loop 方法

• 定义了轮播的过渡时间。
• 定义了轮播图旋转的间隔时间。
• 每次轮播完成后 index 数据就会加1。

渲染方法做的事情

• 生成轮播图。
• 添加轮播图的点击事件，鼠标左键点击轮播图中的图片时会跳转相应地址链接。
• 添加鼠标移入事件，鼠标移入时会停止轮播，鼠标离开时会启动定时器继续轮播。

编码实现

• 定义react组件类的方法。
• 利用react的componentDidMount生命周期。
• 利用setTimeout定时器。
• 利用this.props传递组件所需要的属性。
• 利用addEventListener添加监听事件。
• 利用CSS中transform-style设置3d效果，利用transform中的平移、旋转的属性。