xxx

exercise2/scripts/start.js

@@ -45,7 +45,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8080;
 const HOST = process.env.HOST || '0.0.0.0';
 
 if (process.env.HOST) {

exercise2/src/App.js

@@ -16,7 +16,7 @@ class App extends React.Component{
         {src:"https://img.alicdn.com/tfs/TB1_1OLxQL0gK0jSZFtXXXQCXXa-1130-500.jpg_q100.jpg_.webp",url:"https://www.tmall.com/wow/brand/act/fashion?acm=lb-zebra-2386-265936.1003.4.410386&scm=1003.4.lb-zebra-2386-265936.OTHER_1_410386&ali_trackid=19_4803ba43894904cab9c8c08820f2e4a5&spm=875.7931836/B.2016006.d2"}
       ];
       this.setState({images:images})
-    })
+    },0)
   }
   render(){
     return(

exercise2/src/components/swiper/index.js

@@ -3,13 +3,39 @@ import './style.css'
 export default class Swiper extends React.Component{
     constructor(){
         super()
-        this.state={
-
-        }
+        this.state={}
         this.isInit=true;
         this.Data=[];
+        this.timer=null;
         this.index=0;
     }
+    componentDidMount(){
+        this.autoPlay()
+    }
+    autoPlay(){
+        this.timer=setInterval(()=>{
+            if(this.Data && this.Data.length>0){
+                this.isInit=false;
+                for(let i=0;i<this.Data.length;i++){
+                    if(this.Data[i].active){
+                        this.Data[i].active=false;
+                        break;
+                    }
+                }
+                if(this.index>=this.Data.length-1){
+                    this.index=0;
+                }else {
+                    this.index++;
+                }
+                this.Data[this.index].active=true;
+                this.setState({});
+            }
+        },2000)
+        
+    }
+    stopPlay(){
+        clearInterval(this.timer)
+    }
     changeImg=(index)=>{
         this.isInit=false;
         this.index=index;
@@ -28,7 +54,7 @@ export default class Swiper extends React.Component{
         this.Data=this.props.data;
         if(this.Data && this.Data.length>0 && this.isInit){
             for(let i=0;i<this.Data.length;i++){
-                if(i===1){
+                if(i==1){
                     this.Data[i].active=true;
                 }
                 else {
@@ -37,7 +63,10 @@ export default class Swiper extends React.Component{
             }
         }
         return(
-            <div className="myswiper">
+            <div className="myswiper"
+            onMouseOver={this.stopPlay.bind(this)}
+            onMouseOut={this.autoPlay.bind(this)}
+            >
                 {
                     (this.Data && this.Data.length>0) && this.Data.map((item,index)=>{
                         return (

exercise2/src/components/swiper/style.css

@@ -1,7 +1,7 @@
 .myswiper{
     position: relative;
-    width:1000px;
-    height: 400px;
+    width:600px;
+    height: 200px;
     margin: 100px auto 0;
     border: 1px solid red;
 }