react 引入轮播插件_React.js实现轮播图

react.js的基本思想，是通过改变state或props的值，重新渲染用户界面(不用操作DOM)。截图GIF效果如下(只截取了三页效果)：

GIF1.gif

1.文件列表：

1490606951(1).jpg

2.组件功能说明：

1.可控制滚动方向(上下左右)

2.可控制轮播图片的宽高

3.可控制轮播图片的数量

4.可控制轮播图片停留时间

5.可控制轮播的风格

6.轮播的基本功能(dots,左右按钮，鼠标滑入滑出的暂停与播放，无缝)

3.组件使用说明：

用户修改json中的数据即可使用，

imgArray ---------------------------- 数组类型，放置轮播图片的地址(必填)

linkArray ---------------------------- 数组类型，放置点击图片访问的地址(必填)

lunboObject ------------------------ json类型，放置一些轮播图的基本设置(必填)

interval ---------------------------- number类型，设置图片停留时间

direction -------------------------- string类型，设置运动的方向

number --------------------------- number类型，设置图片数量(必填)

boxStyle -------------------------- string类型，设置某些地方的样式

imgWidth ------------------------- number类型，设置图片宽度(必填)

imgHeight ------------------------ number类型，设置图片高度(必填)

4.组件内容：

1.data.json

"imgArray": [

"../src/pages/lunbo/img/1.jpg",

"../src/pages/lunbo/img/2.jpg",

"../src/pages/lunbo/img/3.jpg",

"../src/pages/lunbo/img/4.jpg",

"../src/pages/lunbo/img/5.jpg",

"../src/pages/lunbo/img/6.jpg",

"../src/pages/lunbo/img/7.jpg"

],

"linkArray": [

"http://bj.ganji.com",

"http://bj.ganji.com",

"http://bj.ganji.com",

"http://bj.ganji.com",

"http://bj.ganji.com",

"http://bj.ganji.com",

"http://bj.ganji.com"

],

"lunboObject": {

"interval": 1000,

"direction": "right",

"number": 7,

"boxStyle": "content",

"imgWidth": 550,

"imgHeight": 350

}

}

2.lunbo.jsx

var style = require('./lunbo.less');

var R