<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>webapp轮播图</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="font/iconfont.css">
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<div class="index-content" id="my"></div>
<script type="text/babel">
window.onload = function(){
class App extends React.Component{
render () {
return (
<div>
<Banner />
</div>
);
}
};
class Banner extends React.Component{
constructor() {
super();
this.timer = null;
this.state = {
n:0,
img:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'],
};
};
componentDidMount () {
this.autoPlay();
};
autoPlay(){
this.timer = setInterval(()=>{
this.play();
},2000)
};
play(){
let {
n,img} = this.state;
n++;
if(n==img.length){
n = 0;
};
this.setState({
n
})
};
componentWillUnMount(){
console.log('销毁');
clearInterval(this.timer);
}
render () {
let {
n,img} = this.state;
var imgList = img.map((item,i)=>{
return <img key={
i} src={
item} style={
{
display:(i==n)?'block':'none'}}/>
});
var liList = img.map((item,i)=>{
return <li key={
i} className={
i==n?"selected":""}></li>
});
return (
<div className="banner">
{
imgList}
<div className="banner-circle">
<ul>
{
liList}
</ul>
</div>
</div>
);
}
};
ReactDOM.render(
<App />,
document.getElementById("my")
)
}
</script>
</body>
</html>