index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>study-React-01-jdapp</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    </head>

    <body>
        <div id="app"></div>
        <script src="./dist/bundle.js"></script>
        <div id="banner"></div>
        <script type="text/babel">
            class Banner extends React.Component{
                constructor(props){
                    super(props);
                    this.state={
                        count:0
                    }
                    this.handleMouseEnter=this.handleMouseEnter.bind(this)
                    this.handleMouseOut=this.handleMouseOut.bind(this)
           }
                    componentDidMount(){
                        timer()
                    }
                    var timer;//设为全局很抱歉；
                    timer(){
                        timer=setTimeout(tick(),1000);
                        }
                    tick(){
                       this.setState(function(d){
                       count:++d;
                       }
                       )
                       }
                    handleMouseEnter(){
                    clearTimeout(timer)
                    }
                    handleMouseOut(){
                    timer();
                    }
                   render(){
                   var i_src=".jpg";
                    imgstyle={
                        float:"left";
                    }

                    var images=[];
                    for(var i=0;i<banner图的个数;i++)
                        image.push(<img src=i+i_src key=i style={imgstyle} onMouseEnter={this.handleMouseEnter}/>)
                        return(
                        <div style={{overflow:"hidden",width:"一张banner的宽度，后边改的人自己改一下哦！"}}
                            {images[this.state.count%（banner图个数]）}//
                         </div>
                    )
                    }
                }
            }
        </script>
    </body>
</html>