轮播图是各大主流app必不可少的一个组件，常见应用在banner图及滑动菜单等方面。写这篇文章目的是尝试培养从一个点讲到一个面的思维方式。

移动端的触摸事件

移动端的触摸事件和pc端的触摸事件很像。

pc端是mousedown 、mousemove、 mouseup

移动端是touchstart、touchmove、touchend

如果我们想在pc端封装一个拖拽效果，一般是这样写：

    let odiv = document.getElementsByTagName("div")[0] 
    let disX
    let disY
    function fnDown (event) {   
        disX = event.clientX  - odiv.offsetLeft
        disY = event.clientY  - odiv.offsetTop  
        document.addEventListener("mousemove", fnMove, false)
        document.addEventListener("mouseup", fnUp, false)
    }
    function fnMove(event){  
        odiv.style.top = event.clientY - disY + "px"
        odiv.style.left = event.clientX - disX + "px" 
    }
    function fnUp (event) { 
        document.removeEventListener("mousemove", fnMove, false)
        document.removeEventListener("mouseup", fnUp, false)
    } 
    odiv.addEventListener("mousedown", fnDown, false)
 

或者这样子：

var oDiv = document.getElementsByTagName("div")[0] 
oDiv.onmousedown=function(ev){
    var disX=ev.clientX-oDiv.offsetLeft
    var disY=ev.clientY-oDiv.offsetTop 
    document.onmousemove=function(ev){
    var l=ev.clientX-disX
    var t=ev.clientY-disY 
    oDiv.style.left=l+'px'
    oDiv.style.top=t+'px'
    }
    document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null
    }
}

如果是移动端，我们还可以这样：

let odiv = document.getElementById("box")  
let x = y = 0
odiv.addEventListener("touchstart", function(event){
 
    let disX = event.targetTouches[0].clientX - x
    let disY = event.targetTouches[0].clientY - y
    console.log(disX, disY)

    fnmove = function(event){ 
        x =  event.targetTouches[0].clientX - disX  
        y =  event.targetTouches[0].clientY - disY   
        odiv.style.transform = `translate(${x}px, ${y}px)`
    }

    fnend = function (event){ 
        odiv.removeEventListener("touchmove", fnmove,false)
        odiv.removeEventListener("touchmove", fnend,false)
    }
    odiv.addEventListener("touchmove", fnmove,false)
    odiv.addEventListener("touchend", fnend, false)
}, false)

可能你会发现，咦，居然有个targetTouches？！之前的一篇文章（如何封装一个触摸滑屏函数？）不是说用touches吗？这两个有什么区别？

• touches:当前屏幕上所有触摸点的集合列表。
• targetTouches: 绑定事件的那个结点上的触摸点的集合列表。

另外还有一个changeTouches：

• changedTouches: 触发事件时改变的触摸点的集合。

引用一张图对以上内容进行总结

#