用react实现轮播效果组件示例代码
React刚出来不久,组件还比较少,不像jquery那样已经有很多现成的插件了,于是自己写了一个基于React的轮播效果组件,现在分享给大家,有需要的可以参考借鉴。
我发现React和AngularJS思想完全不同,AngularJS是基于双向绑定,在Modal
层中定制数据,然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件,可以直接看一下。代码很简单。原理就是通过React在componentDidMount
后改变setState
,来动态改变css样式。
说明以下:看gif很卡,但是实际效果还是很好的。
以下是示例代码
LunBo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
require( 'styles/App.css' ); require( 'normalize.css/normalize.css' ); import React from 'react' ; import ReactDOM from 'react-dom' const LunBo=React.createClass({ propsTypes:{ interval:React.PropTypes.number, autoPlay:React.PropTypes.bool, activeIndex:React.PropTypes.bool, defaultActiveIndex:React.PropTypes.bool, direction:React.PropTypes.oneOf[ 'right' , 'left' ], number:React.PropTypes.number, boxStyle:React.PropTypes.string, }, getDefaultProps(){ return { interval:3000, autoPlay: true , defaultActiveIndex:0, direction: 'right' } }, getInitialState(){ return { activeIndex: this .props.defaultActiveIndex? this .props.defaultActiveIndex:0, direction: this .props.direction? this .props.direction: 'right' } }, componentDidMount(){ this .autoPlay(); }, componentWillReceiveProps (){ }, componentWillUnmount(){ clearInterval( this .timeOuter); }, autoPlay(){ if ( this .props.autoPlay){ if ( this .props.direction=== "right" ){ this .timeOuter=setInterval( this .playRight, this .props.interval); } else if ( this .props.direction=== "left" ){ this .timeOuter=setInterval( this .playLeft, this .props.interval); } } }, playRight(indexIn){ let index=indexIn?indexIn: this .state.activeIndex+1; console.log(index); if (index> this .props.number-1){ index=0; } this .setState({ activeIndex:index }) }, playLeft(indexIn){ let index=indexIn?indexIn: this .state.activeIndex-1; console.log(index); if (index<0){ index= this .props.number-1; } this .setState({ activeIndex:index }) }, position(){ switch ( this .state.activeIndex){ case 0: return "onePosition" ; case 1: return "twoPosition" ; case 2: return "therePosition" ; case 3: return "fourPosition" ; } }, left(){ clearInterval( this .timeOuter); let oldIndex= this .props.activeIndex; this .playLeft(oldIndex+1); this .autoPlay(); }, right(){ clearInterval( this .timeOuter); let oldIndex= this .props.activeIndex; this .playRight(oldIndex-1); this .autoPlay(); }, render(){ let{ interval, autoPlay, activeIndex, defaultActiveIndex, direction, number, boxStyle }= this .props; return <div className={boxStyle} > <span className= "leftIcon" onClick={ this .left}>left</span> <span className= "rightIcon" onClick={ this .right}>right</span> <ul className={ this .position()}> { this .props.children} </ul> </div> } }); export default LunBo; |
index.js
1
2
3
4
|
import 'core-js/fn/object/assign' ;import React from 'react' ; import ReactDOM from 'react-dom' ; import LunBo from './components/Lunbo' ; ReactDOM.render(<LunBo interval={100} number={4} boxStyle= "content" interval={4000} > <li className= "boxStyleLi" >![](http: //upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](//upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](//upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li> <li className="boxStyleLi">![](//upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li></LunBo> ,document.getElementById('app')); |
App.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
.content{ width : 400px ; height : 400px ; border : 3px solid saddlebrown; position : relative ; overflow : hidden ; } .content ul{ display : block ; width : 2500px ; height : 100% ; float : left ; position : absolute ; z-index : 0 ; -webkit-transition: all 0.5 s; -moz-transition: all 0.5 s; -ms-transition: all 0.5 s; -o-transition: all 0.5 s; transition: all 0.5 s; } .boxStyleLi{ display : inline- block ; width : 400px ; height : 400px ; float : left ; } .boxStyleLi img{ width : 100% ; height : 100% ; } .spanStyle{ width : 500px ; height : 400px ; border : 3px solid #598b3a ; background : #7177eb ; position : relative ; } .onePosition{ left : 0 ; } .twoPosition{ left : -400px ; } .therePosition{ left : -800px ; } .fourPosition{ left : -1200px ; } .leftIcon{ width : 50px ; height : 50px ; background : #cd4d5c ; position : absolute ; left : 0 ; top : 350px ; text-align : center ; line-height : 50px ; z-index : 999 ; } .rightIcon{ width : 50px ; height : 50px ; background : #f6403d ; position : absolute ; left : 350px ; top : 350px ; text-align : center ; line-height : 50px ; z-index : 999 ; } |
总结
通过React这一门框架的学习,你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容,希望对大家的学习或者工作能带来一定的帮助,如果有疑问可以留言交流。