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;
			 else
				nowIndex=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>