如何利用react 实现banner轮播效果

最近在看react ， jsx的语法一开始看起来确实不习惯，但是确实比较灵活

运行效果：

import React from 'react';
// import ShadowDOM from 'react-shadow';
import './index.css';
let timeId = null;  // 循环定时的状态
export default class Index extends React.Component {
  constructor () {
    super();
    this.state = {
      timeId: null,
      list: [],
      listClone: [],
      current: 0
    };
  }
  // 删除列表项目
  deleItem (title, date, index) {
    let data = [...this.state.list];
    data.splice(index, 1);
    this.setState({
      list: data
    });
    alert('删除成功！');
  }
  // 点击状态点切换状态
  toggleState (item, index) {
    let data = this.state.listClone;
    this.setState({
      list: data[index],
      current: index
    });
  }
  // 鼠标移入状态点
  stateMouseenter () {
    clearInterval(timeId);
  }
  // 鼠标移出状态点
  stateMouseleave () {
    this.loop(3000); 
  }
  // 轮播事件
  loop (speed) {
    timeId = setInterval(() => {
      let index = this.state.current;
      let data = this.state.listClone;
      if (index  {
      return (
        

          {item.title + '==' + index + new Date().getTime()}           {item.date}         

      );     });     // 状态点     let span = this.state.listClone.map((item, index) => {       index === this.state.current ? active = 'active' : active = '';       return (                    {index + 1}                );     });     return (       

        

{span}

        

{Li}

      

    );   }   componentWillMount () {     // 页面加载的数据     let list = [       {         date: '2018-02-12 12:54:52',         title: '● 今天深圳市天气很好，很适合外出旅游1'       },       {         date: '2018-02-12 12:54:52',         title: '● 今天深圳市天气很好，很适合外出旅游2'       },       {         date: '2018-02-12 12:54:52',         title: '● 今天深圳市天气很好，很适合外出旅游3'       },       {         date: '2018-02-12 12:54:52',         title: '● 今天深圳市天气很好，很适合外出旅游4'       },       {         date: '2018-02-12 12:54:52',         title: '● 今天深圳市天气很好，很适合外出旅游5'       }     ];     this.setState({       list: [...list],       listClone: [[...list], [...list], [...list], [...list], [...list]]     });     this.loop(3000);   }   componentDidMount () {     }   componentDidUpdate () {     }   componentWillUnmount () {} };

css：

.list-item {
  width: 600px;
  padding: 10px;
  margin: 40px auto;
  background: #ccc;
  border: 1px solid #eee;
}
.list-item li {
  margin: 10px 0;
  font-size: 14px;
  color: #333;
  text-align: left;
}
.list-item li span:nth-child(2) {
  float: right;
}
.item-state {
  text-align: right;
}
.item-state span {
  display: inline-block;
  height: 20px;
  width: 20px;
  color: #333;
  line-height: 20px;
  text-align: center;
  background: #eee;
  border-radius: 20px;
  margin-left: 5px;
  cursor: pointer;
}
.item-state span.active {
  background: red;
}

以上就是对如何利用react 实现banner轮播效果的全部介绍，希望大家可以有所收获，更多React视频教程请关注PHP中文网。