react 小例子--轮播

<!--页面容器-->
<div class="index-content" id="my"></div>
<script type="text/babel">
    window.onload = function(){
        // 轮播
        class Lunbo extends React.Component{
			constructor(){
				super();
				this.state={
					num:0,
					imgArray: ['img/banner1.jpg',  
							'img/banner2.jpg',  
							'img/banner3.jpg',  
							'img/banner4.jpg',
							'img/banner5.jpg']
				}
			}
			autoplay(){
				this.state.num++;
				if(this.state.num == this.state.imgArray.length){
					this.state.num = 0;
				}
				this.setState({
					num:this.state.num
				})
			};
			play(){  
			setInterval(()=>{this.autoplay()}, 2000)  
			};
			componentDidMount(){ 
				this.play();
			};
			render(){
				let {num,imgArray} = this.state ;
				var imgList = imgArray.map(function(item,index){
					return <img src={item} key={index} style={{display:(index==num) ?'block':'none'}} />
				})
				var liList = imgArray.map(function(item,index){
					return <li key={index} className={ index==num ? 'selected':''}></li>
				})
		
				return (
					<div className="banner">
						{imgList}
						<div className="banner-circle">
							<ul>
								{liList}
							</ul> 
						</div>
						
					</div>
				)
				
			}
			
		}
        ReactDOM.render(
          <Lunbo />,
          document.getElementById("my")
        );
    }复制代码

转载于:https://juejin.im/post/5c1cf032e51d451be35e30ed