上一篇文章中聂抢，我們介紹了如何實(shí)現(xiàn)輪播圖的無縫滾動(dòng)
這一篇文章將會(huì)介紹如何實(shí)現(xiàn)自動(dòng)播放勇边，以及如何將自動(dòng)播放和手指滑動(dòng)這兩個(gè)事件進(jìn)行隔離
自動(dòng)播放
假設(shè)自動(dòng)播放的順序?yàn)椋簣D片無限向左滾動(dòng)
那么當(dāng)我們發(fā)現(xiàn) this.current 指向第二組最后一張圖片時(shí)，也應(yīng)該讓它瞬間移動(dòng)到第一組的最后一張圖片
直接看代碼：
autoPlaySlider = () => {
clearInterval(this.intervalID)
this.intervalID = setInterval(() => {
if(this.current === this.dotLength*2 -1){
this.current = this.dotLength - 1
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = 'none'
this.list.current.style.transform = `translateX(${this.translatex}px)`
clearTimeout(this.timerID)
this.timerID = setTimeout(() => {
this.current++
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = '0.4s'
this.list.current.style.transform = `translateX(${this.translatex}px)`
this.formatDots()
}, 0);
}else{
this.current++
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = '0.4s'
this.list.current.style.transform = `translateX(${this.translatex}px)`
this.formatDots()
}
}, 1500);
}
當(dāng) this.current 指向第二組最后一張圖片時(shí)，必須要做2次transform的動(dòng)作
第一次：從“第二組最后一張” -> “第一組最后一張”
第二次：從“第一組最后一張” -> “第二組第一張”
為了將這兩個(gè)動(dòng)作完全隔離，我們用了一個(gè)計(jì)時(shí)器timerID，將 第二次的滾動(dòng)動(dòng)作 延遲執(zhí)行
如果不這樣做拉队，第二次的動(dòng)作將會(huì)覆蓋第一次的動(dòng)作，導(dǎo)致動(dòng)畫效果出錯(cuò)阻逮，變成“向右滾動(dòng)”
兼容自動(dòng)播放和手指觸摸
我們的第一個(gè)目標(biāo)是：當(dāng)手指開始滑動(dòng)圖片時(shí)粱快，停止自動(dòng)播放
當(dāng) touchStart 被觸發(fā)時(shí)，清空頁(yè)面上所有與自動(dòng)播放相關(guān)的計(jì)時(shí)器
然后給這個(gè)“進(jìn)程”上一個(gè)鎖叔扼，將this.touching設(shè)置為true
并在touchend 結(jié)束時(shí)事哭，將 this.touching 改為 false
我們的第二個(gè)目標(biāo)是：當(dāng)手指停止滑動(dòng)圖片后，過一段時(shí)間瓜富，重新開始自動(dòng)播放
當(dāng)touchend結(jié)束時(shí)鳍咱，開啟一個(gè)名為 waitForAutoPlay 的計(jì)時(shí)器，3s之后与柑，執(zhí)行autoPlaySlider函數(shù)
并在autoPlaySlider函數(shù)開頭谤辜，根據(jù) this.touching的值 多加一層判斷
autoPlaySlider = () => {
if(this.touching){
return
}else{
...
}
}
最后，別忘了在組件卸載之前价捧，清空頁(yè)面上的所有計(jì)時(shí)器
componentWillUnmount() {
clearInterval(this.intervalID)
clearTimeout(this.timerID)
clearTimeout(this.waitForAutoPlay)
}
完整代碼
Slider.js的完整代碼如下
import React, {Component, Fragment} from 'react'
import {
SliderWrapper,
SliderList,
SliderDot
} from './style'
class Slider extends Component {
constructor(props) {
super(props)
this.wrap = React.createRef()
this.list = React.createRef()
this.dot = React.createRef()
this.dotLength = 0
this.startPoint = {}
this.distance = {}
this.current = 0
this.translatex = 0
this.startOffset = 0
this.imgWidth = this.props.imgWidth
this.threshold = 0.2 //滑動(dòng)切換閾值
this.touching = false
this.isMove = false
this.intervalID = null
this.timerID = null
}
render() {
return (
<Fragment>
<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>
</Fragment>
)
}
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')
this.autoPlaySlider()
}
autoPlaySlider = () => {
if(this.touching){
return
}else{
clearInterval(this.intervalID)
this.intervalID = setInterval(() => {
if(this.current === this.dotLength*2 -1){
this.current = this.dotLength - 1
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = 'none'
this.list.current.style.transform = `translateX(${this.translatex}px)`
clearTimeout(this.timerID)
this.timerID = setTimeout(() => {
this.current++
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = '0.4s'
this.list.current.style.transform = `translateX(${this.translatex}px)`
this.formatDots()
}, 0);
}else{
this.current++
this.translatex = this.current * -this.imgWidth
this.list.current.style.transition = '0.4s'
this.list.current.style.transform = `translateX(${this.translatex}px)`
this.formatDots()
}
}, 1500);
}
}
handleTouchStart = (ev) => {
clearTimeout(this.timerID)
clearInterval(this.intervalID)
clearTimeout(this.waitForAutoPlay)
this.touching = true
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)`
}
handleTouchMove = (ev) => {
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)`
}
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)`
this.formatDots()
this.touching = false
this.waitForAutoPlay = setTimeout(() => {
if(!this.touching){
this.autoPlaySlider()
}
}, 3000);
}
formatDots() {
Array.from(this.dot.current.childNodes).forEach((item,index) => {
item.classList.remove('active')
if(index === (this.current%this.dotLength)){
item.classList.add('active')
}
})
}
componentWillUnmount() {
clearInterval(this.intervalID)
clearTimeout(this.timerID)
clearTimeout(this.waitForAutoPlay)
}
}
export default Slider
