使用 React 實現一個輪播組件

import React, { Component } from 'react';

require('./Slider.scss');

import SliderItem from './SliderItem/SliderItem';
import SliderDots from './SliderDots/SliderDots';
import SliderArrows from './SliderArrows/SliderArrows';

export default class Slider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowLocal: 0,
    };
  }

  // 向前向后多少
  turn(n) {
    var _n = this.state.nowLocal + n;
    if(_n < 0) {
      _n = _n + this.props.items.length;
    }
    if(_n >= this.props.items.length) {
      _n = _n - this.props.items.length;
    }
    this.setState({nowLocal: _n});
  }

  // 開始自動輪播
  goPlay() {
    if(this.props.autoplay) {
      this.autoPlayFlag = setInterval(() => {
        this.turn(1);
      }, this.props.delay * 1000);
    }
  }

  // 暫停自動輪播
  pausePlay() {
    clearInterval(this.autoPlayFlag);
  }

  componentDidMount() {
    this.goPlay();
  }

  render() {
    let count = this.props.items.length;

    let itemNodes = this.props.items.map((item, idx) => {
      return <SliderItem item={item} count={count} key={'item' + idx} />;
    });

    let arrowsNode = <SliderArrows turn={this.turn.bind(this)}/>;

    let dotsNode = <SliderDots turn={this.turn.bind(this)} count={count} nowLocal={this.state.nowLocal} />;

    return (
      <div
        className="slider"
        onMouseOver={this.props.pause?this.pausePlay.bind(this):null} onMouseOut={this.props.pause?this.goPlay.bind(this):null}>
          <ul style={{
              left: -100 * this.state.nowLocal + "%",
              transitionDuration: this.props.speed + "s",
              width: this.props.items.length * 100 + "%"
            }}>
              {itemNodes}
          </ul>
          {this.props.arrows?arrowsNode:null}
          {this.props.dots?dotsNode:null}
        </div>
      );
  }
}

Slider.defaultProps = {
  speed: 1,
  delay: 2,
  pause: true,
  autoplay: true,
  dots: true,
  arrows: true,
  items: [],
};
Slider.autoPlayFlag = null;

它傳入一個 參數 n ，決定向前或者向后移動多少個輪播項，向前和向后分別對于 － 和 ＋。

turn 函數內，聲明一個 _n 變量表示下一個輪播的第幾項。

如果 _n 小于 0 ，那當然是不行的，所以就會讓 _n 變成最后一項；

如果 _n 大于 items 的長度 ，那當然也是不行的，所以就會讓 _n 變成第一項；

最后改變狀態 nowLocal 等于 _n 。

如果 autoplay 是 true，則執行 setInterval 來自動調用 this.turn(1) 向前移動輪播項， this.props.delay * 1000 就是根據配置的 delay 來決定多久移動一次。

這里我們需要一個 autoPlayFlag 參數來保存 setInterval 的回調，用來在鼠標停放在圖片上停止自動輪播，我們把這個 autoPlayFlag 作為組件的一個屬性來保存。

Slider.autoPlayFlag = null;

</div>

然后在組件初始化 componentDidMount 的時候調用這個函數：

componentDidMount() {
 this.goPlay();
}

* {
  margin: 0;
  padding: 0;
}
.slider {
  overflow: hidden;
  width: 100%;
  position: relative;

  &>ul {
    height: auto;
    overflow: hidden;
    position: relative;
    left: 0;
    transition: left 1s;
  }

  .slider-item {
    display: inline-block;
    height: auto;

    &>img {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  .slider-arrow {
    display: inline-block;
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    z-index: 100;
    padding: 20px;
    cursor: pointer;
    font-weight: bold;

    &:hover {
      background: rgba(0,0,0,.2);
    }

    &.slider-arrow-right {
      right: 0;
    }
    &.slider-arrow-left {
      left: 0;
    }
  }

  .slider-dots-wrap {
    z-index: 99;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;

    .slider-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border: 3px solid #ccc;
      margin: 6px;
      cursor: pointer;
      border-radius: 20px;

      &:hover {
        border: 3px solid #868686;
      }

      &.slider-dot-selected {
        background: #ccc;
      }
    }
  }
}