需求分析

1. 移動端觸摸滑動：圖片可以跟隨手指滑動而滑動
2. 底部小圓點：與輪播圖聯動的顯示效果
3. 無縫循環滾動：第一張圖可以往前滑動、最后一張圖也可以往后滑動
4. 可以自動播放（下一篇文章介紹）

頁面樣式和布局

<SliderWrapper
    ref={this.wrap}
    width={this.props.imgWidth}
    onTouchStart={this.handleTouchStart}
    onTouchMove={this.handleTouchMove}
    onTouchEnd={this.handleTouchEnd}
>
    <SliderList ref={this.list} >
        {
            this.props.imgList.map((item,index) => {
                return (
                    <li key={index}><img src={item} width={this.props.imgWidth}/></li>
                )
            })
        }
    </SliderList>
    <SliderDot ref={this.dot}>
        {
            this.props.imgList.map((item,index) => {
                return (
                    <li key={index}
                        ></li>
                )
            })
        }
    </SliderDot>
</SliderWrapper>

其中，SliderWrapper是外層容器，它必須有固定的寬度，并設置overflow: hidden
而SliderList內部則需要從左到右、水平排列
圖片滾動的核心操作為：改變SliderList的 translateX 值

style-component文件：

import styled from 'styled-components'

export const SliderWrapper = styled.div`
  width: ${props => props.width + 'px'};
  overflow: hidden;
  margin: 100px auto;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  position: relative;
  background: #000;
  ul{
    margin: 0;
    padding: 0;
    list-style: none
  }
`

export const SliderList = styled.ul`
  display: flex;
  float: left;
  img {
    width: ${props => props.width + 'px'};
    vertical-align: top;
  }
`

export const SliderDot = styled.ul`
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 8px;
  li {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #fff;
    margin: 0 5px;
    transition: 0.2s;
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
    &.active {
      width: 16px;
    }
  }
`

獲取DOM，初始化變量

在constructor中：

1. 給 SliderWrapper、SliderList 和 SliderDot綁定ref：

this.wrap = React.createRef()
this.list = React.createRef()
this.dot = React.createRef()

2. 定義一些變量：

this.dotLength = 0
this.startPoint = {} //滑動開始的坐標
this.distance = {} //滑動距離
this.current = 0 //當前圖片索引
this.translatex = 0 
this.startOffset = 0 //滑動開始坐標 相對于wrapper左邊緣的偏移量
this.imgWidth = this.props.imgWidth //一張圖片的寬度
this.threshold = 0.2 //滑動切換閾值
this.touching = false //是否正在用手指滑動
this.intervalID = null
this.timerID = null

在開始觸摸滾動之前，將SliderList的內容復制一份，接在原來的DOM后面

這個做法有一定缺陷：因為在列表渲染中，key值必須是唯一的，直接復制HTML會導致key值重復

并設置第一個小圓點的樣式為active：

componentDidMount() {
    this.initSlider()
}

initSlider = () => {
    this.dotLength = this.dot.current.childNodes.length
    this.list.current.innerHTML+=this.list.current.innerHTML
    this.dot.current.childNodes[0].classList.add('active')
}

編寫處理滑動的函數

1、讓圖片能夠滾動起來

核心思路如下：

• 獲取觸點的坐標，計算滑動距離
• 設置SliderList的 translateX 值

handleTouchStart = (ev) => {
    let touch = ev.changedTouches[0]
    this.startPoint = {
      x: touch.pageX,
      y: touch.pageY
    }
 }
 
 let touch = ev.changedTouches[0]
    this.distance = {
      x: touch.pageX - this.startPoint.x,
      y: touch.pageY - this.startPoint.y
    }
    
    this.translatex = this.startOffset + this.distance.x
    this.list.current.style.transform = `translateX(${this.translatex}px)`
}

2、切換圖片

我們需要判斷什么時候切換到下一張：
如果我們要切換到第n張圖，那么 translateX 的值應該為：n * (-imgWidth)
如果橫向滑動距離為正，說明手指從左向右滑，應該切換到上一張

handleTouchEnd = (ev) => {
    // 判斷是否超過滑動閾值
    if(Math.abs(this.distance.x) > this.imgWidth * this.threshold){
      if(this.distance.x>0){
          this.current--
      }else{
          this.current++
      }
    }

    this.translatex = this.current * -this.imgWidth
    this.list.current.style.transition = '0.3s'
    this.list.current.style.transform = `translateX(${this.translatex}px)`

}

到這里，我們已經可以拖動圖片，然后切換上一張或下一張了

3、無縫滾動

在滑動開始的這個瞬間：
如果我們發現 this.current 指向第一組的第一張，那么我們應該讓它瞬間跳到第二組的第一張（保證它接下來可以向左或者向右滾動）
同理，如果我們發現 this.current 指向第二組的最后一張，那么我們應該讓它瞬間跳到第一組的最后一張
怎么實現“瞬間”的跳動呢？只要設置 transition = 'none' 即可

handleTouchStart = (ev) => {
    let touch = ev.changedTouches[0]
    this.startPoint = {
        x: touch.pageX,
        y: touch.pageY
    }

    if(this.current === 0){
        this.current = this.dotLength
    }else if(this.current === this.dotLength*2 -1){
        this.current = this.dotLength -1
    }

    this.translatex = this.current * -this.imgWidth
    this.startOffset = this.translatex
    this.list.current.style.transition = 'none'
    this.list.current.style.transform = `translateX(${this.translatex}px)`
}

底部小圓點

我們把這一個功能封裝成一個輔助函數，每次觸發touchend事件之后，就執行這個函數

formatDots() {
    Array.from(this.dot.current.childNodes).forEach((item,index) => {
        item.classList.remove('active')
        if(index === (this.current%this.dotLength)){
            item.classList.add('active')
        }
    })
}

參考資料：掘金-你不知道的輪播圖細節