/
GalleryPrototype.js
71 lines (64 loc) · 1.25 KB
/
GalleryPrototype.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
// import React from 'react';
// import ReactDOM from 'react-dom';
function ButtonLeft(props) {
return (
<button onClick={props.onClickLeft}>
Previous
</button>
);
}
function ButtonRight(props) {
return (
<button onClick={props.onClickRight}>
Next
</button>
);
}
class Ab extends React.Component {
constructor(props) {
super(props);
this.state = {
i: 0,
};
}
handleClickLeft() {
let i = this.state.i;
i--;
this.setState({
i: (i + 6) % 6
});
}
handleClickRight() {
let i = this.state.i;
i++;
this.setState({
i: (i + 6) % 6
});
}
render() {
const arr = [
'xhDSaN.jpg', 'e2NwWL.jpg', 'KdiCtu.jpg',
'L9Q4Ji.jpg', 'ORtDSn.jpg', 'p39u0I.jpg'
];
const imgStyle = {
maxHeight: '550px',
width: 'auto'
};
return (
<div>
<div>
<ButtonLeft onClickLeft={() => this.handleClickLeft()} />
<ButtonRight onClickRight={() => this.handleClickRight()} />
</div>
<div>
<img src={'https://st.chenfanyue.cn/i/' + arr[this.state.i]}
style={imgStyle} />
</div>
</div>
);
}
}
ReactDOM.render(
<Ab />,
document.getElementById('AbContainer')
);