react 如何實現(xiàn)banner輪播效果

這篇文章將為大家詳細講解有關(guān)react 如何實現(xiàn)banner輪播效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

最近在看react ， jsx的語法一開始看起來確實不習慣，但是確實比較靈活

運行效果：

import React from 'react';
// import ShadowDOM from 'react-shadow';
import './index.css';
let timeId = null;  // 循環(huán)定時的狀態(tài)
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('刪除成功！');
  }
  // 點擊狀態(tài)點切換狀態(tài)
  toggleState (item, index) {
    let data = this.state.listClone;
    this.setState({
      list: data[index],
      current: index
    });
  }
  // 鼠標移入狀態(tài)點
  stateMouseenter () {
    clearInterval(timeId);
  }
  // 鼠標移出狀態(tài)點
  stateMouseleave () {
    this.loop(3000); 
  }
  // 輪播事件
  loop (speed) {
    timeId = setInterval(() => {
      let index = this.state.current;
      let data = this.state.listClone;
      if (index < this.state.list.length - 1) {
        index ++;
        this.setState({
          list: data[index],
          current: index
        });
      } else {
        index = 0;
        this.setState({
          list: data[index],
          current: index
        });
      }
    }, speed);
  }
  render () {
    let data = this.state.list;
    let active = '';
    // 數(shù)據(jù)列表
    let Li = data.map((item, index) => {
      return (
        <li onClick={this.deleItem.bind(this, item.title, item.date, index)} key={index}>
          <span>{item.title + '==' + index + new Date().getTime()}</span>
          <span>{item.date}</span>
        </li>
      );
    });
    // 狀態(tài)點
    let span = this.state.listClone.map((item, index) => {
      index === this.state.current ? active = 'active' : active = '';
      return (
        <span
          onClick={this.toggleState.bind(this, item, index)} 
          key={index}
          onMouseEnter={this.stateMouseenter.bind(this)}
          onMouseLeave={this.stateMouseleave.bind(this)}
          className={active}>
          {index + 1}
        </span>
      );
    });
    return (
      <div className="list-item">
        <p className="item-state">{span}</p>
        <ul>{Li}</ul>
      </div>
    );
  }
  componentWillMount () {
    // 頁面加載的數(shù)據(jù)
    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;
}

關(guān)于react 如何實現(xiàn)banner輪播效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。