使用 ReactJS 實現一個簡易的輪播圖 (carousel) 元件。

Task 1：在相框中展示圖片，左右按鈕切換當前圖片

實現思路；把圖片橫向排列成組(image row),放置在相框(frame)中，隱藏超出相框的部分。利用圖片組左側和相框左側的距離(margin-left)改變當前展示在相框中的內容，點選左右按鈕可以改變這個距離。

// How to make use of this component

<Carousel width={400} height={400}>
  {images.map(image => <img src={image} alt="" key={image}/>)}
</Carousel>

// Carousel component

import React, { Component } from 'react';

export default class Carousel extends Component {
  constructor(props) {
    super(props);
    this.state = { currentIndex: 0 };
    this.renderChildren = this.renderChildren.bind(this);
    this.setIndex = this.setIndex.bind(this);
  }

  renderChildren() {
    const { children, width, height } = this.props;
    const childStyle = {
      width: width,
      height: height
    };

    return React.Children.map(children, child => {
      const childClone = React.cloneElement(child, { style: childStyle });
      return (
        <div
          style={{
            display: 'inline-block'
          }}
        >
          {childClone}
        </div>
      );
    });
  }

  setIndex(index) {
    const len = this.props.children.length;
    const nextIndex = (index + len) % len;

    this.setState({ currentIndex: nextIndex });
  }

  render() {
    const { width, height } = this.props;
    const { currentIndex } = this.state;

    const offset = -currentIndex * width;

    const frameStyle = {
      width: width,
      height: height,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      position: 'relative'
    };

    const imageRowStyle = {
      marginLeft: offset,
      transition: '.2s'
    };

    const buttonStyle = {
      position: 'absolute',
      top: '40%',
      bottom: '40%',
      width: '10%',
      background: 'rgba(0,0,0,0.2)',
      outline: 'none',
      border: 'none'
    };

    const leftButtonStyle = {
      ...buttonStyle,
      left: 0
    };

    const rightButtonStyle = {
      ...buttonStyle,
      right: 0
    };

    return (
      <div className="carousel">
        <div className="frame" style={frameStyle}>
          <button
            onClick={() => this.setIndex(currentIndex - 1)}
            style={leftButtonStyle}
          >
            <
          </button>
          <div style={imageRowStyle}>{this.renderChildren()}</div>
          <button
            onClick={() => this.setIndex(currentIndex + 1)}
            style={rightButtonStyle}
          >
            >
          </button>
        </div>
      </div>
    );
  }
}

實現思路

1. 如何顯示block-level的div在同一行

   Solution 1:

   For parent element

white space: nowrap

　　For children elements

display: inline block

Solution 2:

對同一行的div設定float屬性

float:left

　　隱藏超出相框的圖片部分

overflow: hidden

　　通過圖片組和相框左側的距離(margin-left)控制顯示在相框中的內容,設定動畫時間為0.2秒

const offset = -(currentIndex * width)

const imageRowStyle = {
  marginLeft: offset,
  transition: '.2s'
};

　　通過按鈕來控制margin-left, 改變當前相框中內容

  setIndex(index) {
    const len = this.props.children.length;
    const nextIndex = (index + len) % len;

    this.setState({ currentIndex: nextIndex });
  }
  
  ...
  // in render function
  const {width, height} = this.props;
  const {currrentIndex} = this.state;
  const offset = - currentIndex * wid
  th

　　放置按鈕在相框中，設定合適大小，背景半透明，取消邊框顯示。

    const buttonStyle = {
      position: 'absolute',
      top: '40%',
      bottom: '40%',
      width: '10%',
      background: 'rgba(0,0,0,0.2)',
      outline: 'none',
      border: 'none'
    };

    const leftButtonStyle = {
      ...buttonStyle,
      left: 0
    };

    const rightButtonStyle = {
      ...buttonStyle,
      right: 0
    };

marginLeft，改變左側間距，

marginLeft的使用肯定市需要浮動定位和固定定位的結合，還有就是溢位隱藏，

如果想這個過程中有動畫效果，一個動火過度，就需要增加