使用 React 实现一个轮播组件

tip

React 刚出来不久，组件还比较少，不像 jquery 那样已经有很多现成的插件了，当是就自己写了一个基于 React 的轮播组件，当然只是一个小 demo，刚刚有用 es6 的语法重新改了改，就想着写一个小教程给新手，如何实现一个 React 的小组件。
先放上仓库地址，可以先 clone 来看看代码：https://github.com/TongchengQiu/react-slider。
react-slider 是一个图片轮播的组件，支持的配置有 图片（必须好不好，要不然轮播毛）、轮播图片的速度、是否自动轮播、自动轮播的时候鼠标放上去是否暂停、自动轮播速度、是否需要前后箭头、是否需要 dot （我不知道怎么表述好，反正意思你懂）。

第一步 需求

首先，写一个组件必须先考虑改组件的需求有哪些，支持的配置需要哪些。
如上已经说了改组件的需求：

• 轮播的图片

• 配置轮播图片切换的速度

• 可配置是否自动轮播

• 可配置自动轮播的时候鼠标放上去是否暂停

• 可配置自动轮播的速度

• 可配置是否需要前后箭头

• 可配置是否需要 dot （我不知道怎么表述好，反正意思你懂）

这一步先到此为止～～～

第二步 构建项目

这里我们是使用 React 框架，当然也是用它的好搭档 webpack 来构建自动化流程咯～

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!