ReactJS之轮播图

不多说了了，直接上代码；有不了解的加扣扣群 88322534

1.引入的js文件

[javascript] view plain copy

1. <script src="./js/react.js"></script>  
2. <script src="./js/react-dom.js"></script>  
3. <script src="./js/jquery.min.js"></script>  
4. <script src="./js/browser.min.js"></script>  
5. <script src="./js/remarkable.min.js"></script>  

2.css样式

[css] view plain copy

1. * {  
2.     padding: 0;  
3.     margin: 0;  
4. }  
5. ::selection {  
6.     -webkit-user-select: none;  /* Chrome all / Safari all */  
7.     -moz-user-select: none;     /* Firefox all */  
8.     -ms-user-select: none;      /* IE 10+ */  
9.     /* No support for these yet, use at own risk */  
10.     -o-user-select: none;  
11.     user-select: none;  
12. }  
13. li {  
14.     list-style: none;  
15. }  
16. img {  
17.     width: 900px;  
18.     height: 400px;  
19.     border: none;  
20. }  
21. .banner {  
22.     width: 900px;  
23.     height: 400px;  
24.     margin: 200px auto;  
25.     overflow: hidden;  
26. }  
27. .left, .right {  
28.     position: absolute;  
29.     width: 66.5px;  
30.     height: 102.5px;  
31.     background: center no-repeat;  
32.     background-size: 66.5px 102.5px;  
33.     top: 148px;  
34.     opacity: .5;  
35.     cursor: pointer;  
36.     display: none;  
37. }  
38. .left:hover, .right:hover {  
39.     opacity: .6;  
40. }  
41. .left {  
42.     background-image: url(../images/left.png);  
43.     left: 10px;  
44. }  
45. .right {  
46.     background-image: url(../images/right.png);  
47.     right: 10px;  
48. }  
49. .slider-box {  
50.     width: 100%;  
51.     height: 100%;  
52.     position: relative;  
53.     cursor: pointer;  
54. }  
55. .slider-list {  
56.     width: 200%;  
57.     height: 100%;  
58.     position: relative;  
59. }  
60. .slider-list li {  
61.     top: 0;  
62.     right: 0;  
63.     width: 100%;  
64.     height: 100%;  
65.     position: absolute;  
66.     opacity: 0;  
67.     -webkit-transition: all .8s ease-in-out;  
68.     -moz-transition: all .8s ease-in-out;  
69.     -o-transition: all .8s ease-in-out;  
70. }  
71. .slider-list li.select {  
72.     left: 0;  
73.     position: relative;  
74.     opacity: 1;  
75. }  
76. .slider-list li.next {  
77.     position: relative;  
78.     float: left;  
79. }  
80. .slider-nav {  
81.     position: absolute;  
82.     bottom: 15px;  
83.     width: 100%;  
84.     text-align: center;  
85.     z-index: 10;  
86. }  
87. .slider-nav ol li {  
88.     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABQAAAAUAKM7KtEAAADISURBVCjPjdI9T8JQFIDhp6cKTRz4mFpmFwz+//9hgk4YJ0sMJiKSlKVxwFo/Au07ndz7TPeeRFvI5SYytcrW2lrdXCbfLHfjyu/2HpTHMf3ic7cG/jYwk3pt4dy1U02FzREWFs41tfMRooPBQoRC1gkzs1B0MsjDuBcch2EvOIz27c8XDr3cIbz3gm/R/GVH61CqOlnlOdSWnXCpTrFzYXqGrTw227NxaXKCPbmngbzYGf3byL07q+OY/DgOhcJIhspWqWy/4xO4VSw4B3jzAwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wOS0zMFQxNjowMTo1NyswODowMCbyI8YAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMDktMzBUMTY6MDE6NTcrMDg6MDBXr5t6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==) no-repeat;  
89.     width: 18px;  
90.     height: 18px;  
91.     border-radius: 11px;  
92.     display: inline-block;  
93.     padding: 2px;  
94.     overflow: hidden;  
95.     margin-left: 10px;  
96.     cursor: pointer;  
97.     font-size: 0px;  
98.     line-height: 0px;  
99. }  
100. .slider-nav ol li.slider-active {  
101.     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABQAAAAUAKM7KtEAAAFdSURBVCjPfZK/TsJQFIe/cxNoY40KDLZuJg4WjXHAmOoTyOTkm+hL6LOoizG6C4uDgwiDJk4UBkERSGu114Eo+Kf9ppPcL+ck9/cTxihsbHKYxAS80KJF/PUooEeDTRGLnwyoa3+kKQARcdnA8jjOtnPv8+/z7dxx1gOLkrgi3xvFZSmjT8xyXibWaS67e0EP7nVdEMChlNE3M8Vp/tDor/Ui4RpfoViFU/M/DZanT0xgFaVwMD128iRQzntgsqBwYD8rSR7CfhawFXOwbZHCtgXMKQwoGGliwQAMNf77JD7iUWwhPIVpYjcCQkUPrgZpYnUIPCt8OHrTiZrmMARaCp+gwnknSTzvVCCgqYipwW5w1/9Pa/R3A6BGrEA3eYhkvXfW0b+OXnQ3XyPhQTe/2iOssAgeB8bWVMGIdeetOjwMKwCP3GotE8V1cNOKOxmywsFhFhMIeMHHH8fxCfqkeQDbcjvwAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA5LTMwVDE2OjAxOjU3KzA4OjAwJvIjxgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNS0wOS0zMFQxNjowMTo1NyswODowMFevm3oAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC) no-repeat;  
102. }  

3.HTML元素

[html] view plain copy

1. <div id="banner" class="banner"> </div>  

4.下面就是js了

 

<script type="text/babel">  //创建轮播盒子  var SliderBox = React.createClass({  getInitialState: function() {  var data=[ "https://img.alicdn.com/imgextra/i3/113/TB2o18uzUhnpuFjSZFpXXcpuXXa_!!113-0-luban.jpg_q100.jpg", "https://aecpm.alicdn.com/simba/img/TB1W4nPJFXXXXbSXpXXSutbFXXX.jpg", "https://img.alicdn.com/tps/i4/TB1vHgyRVXXXXbJaXXXSutbFXXX.jpg", "https://img.alicdn.com/tfs/TB17RX4SXXXXXakXFXXXXXXXXXX-1130-500.jpg_q100.jpg", "https://img.alicdn.com/imgextra/i2/133/TB2N_0XzHJmpuFjSZFwXXaE4VXa_!!133-0-luban.jpg_q100.jpg", "https://aecpm.alicdn.com/simba/img/TB1_JXrLVXXXXbZXVXXSutbFXXX.jpg"];return {data: data, dataLength: data.length, nowIndex:0,nowZ:2};  },  componentWillMount: function() {          this.interval = setInterval(this.autoSlider, 2000);          },  autoSlider:function(){ var nowIndex=this.state.nowIndex; if(nowIndex<this.state.dataLength-1)nowIndex+=1; elsenowIndex=0; this.setState({nowIndex:nowIndex,nowZ:this.state.nowZ+1});   },  componentDidMount: function() {/*$.ajax({  url: this.props.url,  dataType: 'json',  cache: false,  success: function(data) {this.setState({data: data});  }.bind(this),  error: function(xhr, status, err) {console.error(this.props.url, status, err.toString());  }.bind(this)});*/  },  silderBoxEnter:function(e){ ReactDOM.findDOMNode(this.refs.left).style.display="block"; ReactDOM.findDOMNode(this.refs.right).style.display="block"; clearInterval(this.interval);  },  silderBoxLeave:function(e){ ReactDOM.findDOMNode(this.refs.left).style.display="none"; ReactDOM.findDOMNode(this.refs.right).style.display="none"; this.interval = setInterval(this.autoSlider, 2000);  },  leftClick:function(e){  var nowIndex=0;  if(0==this.state.nowIndex)  nowIndex=this.state.dataLength-1;  else  nowIndex=this.state.nowIndex-1;  this.setState({nowIndex:nowIndex,nowZ:this.state.nowZ+1});  },  rightClick:function(e){  var nowIndex=0;    if((this.state.dataLength-1)==this.state.nowIndex)  nowIndex=0;  else  nowIndex=this.state.nowIndex+1;     this.setState({nowIndex:nowIndex,nowZ:this.state.nowZ+1});  },  //这个鼠标移上事件会传到轮播Menu里使用  navsOver:function(e){var id=e.target.getAttribute("data-id");this.setState({nowIndex:parseInt(id),nowZ:this.state.nowZ+1});  },  render: function() {return (  <div className="slider-box" onMouseEnter={this.silderBoxEnter} onMouseLeave={this.silderBoxLeave}><SliderList data={this.state.data} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex}/><div className="left" ref="left" onClick={this.leftClick} style={{zIndex:this.state.nowZ+10}}></div>  <div className="right" ref="right" onClick={this.rightClick} style={{zIndex:this.state.nowZ+10}}></div><SliderMenu dataLength={this.state.dataLength} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex} navsOver={this.navsOver}/>  </div>);  }});//创建轮播内容var SliderList = React.createClass({  render: function() {var sliderNodes=[];var nowIndex=this.props.nowIndex;var nowZ=this.props.nowZ;this.props.data.forEach(function(e,i){sliderNodes.push(<li className={i==nowIndex?'select slider-'+i:'slider-'+i} style={{zIndex:i==nowIndex?nowZ:1}} key={i}><img src={e}/></li>);});return (  <ul className="slider-list">{sliderNodes}  </ul>);  }});//创建轮播图底部导航var SliderMenu = React.createClass({  render: function() {var sliderNavs=[];var nowIndex=this.props.nowIndex;for(var i=0;i<this.props.dataLength;i++){sliderNavs.push(<li onMouseOver={this.props.navsOver} className={i==nowIndex?'slider-active':''} data-id={i} key={i}></li>);}return (  <div className="slider-nav" style={{zIndex:this.props.nowZ+10}}><ol>{sliderNavs}</ol>  </div>);  }});ReactDOM.render(        <SliderBox url="./banner.json" />,        document.getElementById('banner')     );    </script>