diff --git a/package.json b/package.json
index f6c7705..8aa1ea9 100755
--- a/package.json
+++ b/package.json
@@ -20,5 +20,10 @@
   "devDependencies": {
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }
diff --git a/src/components/Computer.css b/src/components/Computer.css
new file mode 100644
index 0000000..665a9ec
--- /dev/null
+++ b/src/components/Computer.css
@@ -0,0 +1,14 @@
+li{ list-style:none;}
+#ul1{ margin:20px auto; border:1px #FFF solid; border-bottom:none; border-right:none; overflow:hidden; background-image:url(./img/bg.jpg); background-size:cover;}
+#ul1 li{ float:left; border:1px #FFF solid; border-top:none; border-left:none; background-size:cover;}
+#ul1 li.active{ animation:0.5s linear infinite flash; -webkit-animation:0.5s linear infinite flash;}
+@keyframes flash{
+    0%{ opacity:0.1;}
+    50%{ opacity:1;}
+    100%{ opacity:0.1;}
+}
+@-webkit-keyframes flash{
+    0%{ opacity:0.1;}
+    50%{ opacity:1;}
+    100%{ opacity:0.1;}
+}
\ No newline at end of file
diff --git a/src/components/Computer.js b/src/components/Computer.js
new file mode 100644
index 0000000..7f929d9
--- /dev/null
+++ b/src/components/Computer.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Computer.css';
+
+class Computer extends Component {
+    constructor(props){
+        super(props);
+        this.state={
+            size:8
+        }
+
+    }
+    componentDidMount(){
+        var size = this.state.size,len = size * size,sizeGird = 50,row = 0,col = 0,min = 0,max = size - 1, arr = [], bgArr = [],arr=[];
+        var oUl = document.getElementById('ul1');
+        var aLi = oUl.getElementsByTagName('li');
+        for(var i=0;i<len;i++){
+            //aLi[ row * size + col ].innerHTML = i;
+            arr.push( aLi[ row * size + col ] );
+            if( row == min && col < max ){
+                col = col + 1;
+            }
+            else if( col == max && row < max ){
+                row = row + 1;
+            }
+            else if( row == max && col > min ){
+                col = col - 1;
+            }
+            else if( col == min && row > min ){
+                row = row - 1;
+            }
+            if( row - 1 == min && col == min ){
+                min = min + 1;
+                max = max - 1;
+            }
+        }
+        for(var i=0;i<aLi.length;i++){
+            if(i%5==0){
+                var bgImage = 'url(./img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
+                arr[i].style.backgroundImage = bgImage;
+                bgArr.push([i,bgImage]);
+            }
+        }
+
+        run();
+        setInterval(run,1000);
+
+        function run(){
+
+            for(var i=0;i<aLi.length;i++){
+                aLi[i].style.backgroundImage = '';
+                aLi[i].className = '';
+            }
+
+            for(var i=0;i<bgArr.length;i++){
+
+                bgArr[i][0] = bgArr[i][0] + 1;
+
+                if(arr[ bgArr[i][0] ]){
+                    arr[ bgArr[i][0] ].style.backgroundImage = bgArr[i][1];
+                    arr[ bgArr[i][0] ].className = 'active';
+                    arr[ bgArr[i][0] ].style.animationDelay = -Math.random()*2 + 's';
+                    arr[ bgArr[i][0] ].style.webkitAnimationDelay = -Math.random()*2 + 's';
+                }
+                else{
+                    bgArr.pop();
+                    var bgImage = 'url(./img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
+                    bgArr.unshift([0,bgImage]);
+                }
+
+            }
+
+        }
+    }
+
+    render() {
+        var size = this.state.size,len = size * size,sizeGird = 50,row = 0,col = 0,min = 0,max = size - 1, arr = [], bgArr = [],arr=[];
+        for(let i=0;i<len;i++){
+            arr.push(i)
+        }
+        return (
+            <ul id='ul1' style={{width: size * (sizeGird + 1) + 'px'}}>
+                {
+                    arr.map((val,i)=>{
+                        return <li style={{width:sizeGird+'px',height:sizeGird+'px'}} key={i}></li>
+                    })
+                }
+            </ul>
+        );
+    }
+}
+
+
+
+export default Computer;
\ No newline at end of file
diff --git a/src/components/Pagination.css b/src/components/Pagination.css
new file mode 100644
index 0000000..bd42bdb
--- /dev/null
+++ b/src/components/Pagination.css
@@ -0,0 +1,26 @@
+ul,li{ padding:0;margin:0;list-style:none}
+.pagination{
+    float: left;
+}
+.paginationLi{
+    border: 1px solid #cccccc;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    display: inline-block !important;
+    text-align: center;
+    color: #666666;
+    cursor:pointer ;
+}
+.paginationLi.active{
+    border: 1px solid #2f45b0;
+    color: #2f45b0;
+}
+.clearfix{
+    *zoom:1;
+}
+.clearfix:after{
+    content: "";
+    display: block;
+    clear: both;
+}
\ No newline at end of file
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
new file mode 100644
index 0000000..cdfd39e
--- /dev/null
+++ b/src/components/Pagination.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Pagination.css';
+
+class Pagination extends Component {
+    render() {
+        const {page,size,total,onChange}=this.props;
+        let arr=[],pageNum=total%size?Math.floor(total/size)+1:total/size;
+        for(let i=0;i<pageNum;i++){
+            arr.push(i)
+        }
+        if(pageNum<=1){
+            return ''
+        }
+        return (
+            <ul className='pagination clearfix'>
+                {
+                    arr.map((val,i)=>{
+                        return(
+                            <li onClick={()=>onChange(i,size)} key={i} className={page==i?'paginationLi active':'paginationLi'}>{i+1}</li>
+                        )
+                    })
+                }
+            </ul>
+        );
+    }
+}
+
+Pagination.propTypes = {
+    page: PropTypes.number||0,
+    size:PropTypes.number||1,
+    position: PropTypes.string||'bottom',
+};
+
+export default Pagination;
\ No newline at end of file
diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js
index 7b40246..5f8a8dd 100755
--- a/src/components/PlayerList.js
+++ b/src/components/PlayerList.js
@@ -2,12 +2,31 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
+import {Pagination} from "./index";
 
 class PlayerList extends Component {
+    constructor(props) {
+        super(props);
+        // 设置 initial state
+        this.state = {
+            start:0,
+            end:(this.props.pagination.size||0),
+            page:this.props.pagination.page||0
+        };
+    }
+    onChange=(page,size)=>{
+        this.setState({
+            start:page*size,
+            end:(page+1)*size,
+            page:page,
+        })
+    };
   render() {
+    const {pagination,players}=this.props,{start,end,page}=this.state;
+    let playersArr=players.slice(start,end);
     return (
       <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
+        {playersArr.map((player, index) => {
           return (
             <PlayerListItem
               key={index}
@@ -20,6 +39,12 @@ class PlayerList extends Component {
             />
           );
         })}
+          <Pagination
+              page={page}
+              size={pagination.size||5}
+              total={pagination.total||0}
+              onChange={this.onChange.bind(this)}
+          />
       </ul>
     );
   }
diff --git a/src/components/img/1.jpg b/src/components/img/1.jpg
new file mode 100644
index 0000000..29eee80
Binary files /dev/null and b/src/components/img/1.jpg differ
diff --git a/src/components/img/10.jpg b/src/components/img/10.jpg
new file mode 100644
index 0000000..9e24177
Binary files /dev/null and b/src/components/img/10.jpg differ
diff --git a/src/components/img/11.jpg b/src/components/img/11.jpg
new file mode 100644
index 0000000..84370c8
Binary files /dev/null and b/src/components/img/11.jpg differ
diff --git a/src/components/img/12.jpg b/src/components/img/12.jpg
new file mode 100644
index 0000000..a2de4c6
Binary files /dev/null and b/src/components/img/12.jpg differ
diff --git a/src/components/img/2.jpg b/src/components/img/2.jpg
new file mode 100644
index 0000000..d0591fd
Binary files /dev/null and b/src/components/img/2.jpg differ
diff --git a/src/components/img/3.jpg b/src/components/img/3.jpg
new file mode 100644
index 0000000..5ce7115
Binary files /dev/null and b/src/components/img/3.jpg differ
diff --git a/src/components/img/4.jpg b/src/components/img/4.jpg
new file mode 100644
index 0000000..62849b4
Binary files /dev/null and b/src/components/img/4.jpg differ
diff --git a/src/components/img/5.jpg b/src/components/img/5.jpg
new file mode 100644
index 0000000..d3c1cf2
Binary files /dev/null and b/src/components/img/5.jpg differ
diff --git a/src/components/img/6.jpg b/src/components/img/6.jpg
new file mode 100644
index 0000000..50981ab
Binary files /dev/null and b/src/components/img/6.jpg differ
diff --git a/src/components/img/7.jpg b/src/components/img/7.jpg
new file mode 100644
index 0000000..cbe7059
Binary files /dev/null and b/src/components/img/7.jpg differ
diff --git a/src/components/img/8.jpg b/src/components/img/8.jpg
new file mode 100644
index 0000000..d3065f7
Binary files /dev/null and b/src/components/img/8.jpg differ
diff --git a/src/components/img/9.jpg b/src/components/img/9.jpg
new file mode 100644
index 0000000..6443676
Binary files /dev/null and b/src/components/img/9.jpg differ
diff --git a/src/components/img/bg.jpg b/src/components/img/bg.jpg
new file mode 100644
index 0000000..75b6752
Binary files /dev/null and b/src/components/img/bg.jpg differ
diff --git a/src/components/index.js b/src/components/index.js
index 12ce117..5c060af 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Pagination } from './Pagination';
+export { default as Computer } from './Computer';
diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js
index 0e4bfa5..e91a557 100755
--- a/src/containers/PlayerListApp.js
+++ b/src/containers/PlayerListApp.js
@@ -3,7 +3,7 @@ import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { PlayerList, AddPlayerInput ,Pagination,Computer} from '../components';
 
 class PlayerListApp extends Component {
   render() {
@@ -21,7 +21,8 @@ class PlayerListApp extends Component {
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <PlayerList players={playersById} actions={actions} pagination={{total:playersById.length,page:0,size:5}}/>
+          <Computer/>
       </div>
     );
   }