手机触摸切换广告图片

【Javascript】

下载

新闻

文章

iphone或者andriod手机本地应用中常用的图片介绍滑动切换的效果：实现触屏滚动图片，可以手指拨动，看看能否有简洁的代码，尽量不要使用js库。

开始使用zeptojs库，一个轻量级非常类似jquery的移动终端库。结合swipeLeft左划事件，swipeRight右划事件，及animate动画函数很快就完成。但是很快发现事件并不是那么灵活，最后死活不起作用。fuck,还得我原始代码解决。并写成函数，集合了常用的几种划屏事件。

function touchEvent(obj, direction, fun) {
    //obj:dom对象
    //direction:swipeleft,swiperight,swipetop,swipedown,singleTap,longTap,dblTap,touchstart,touchmove,touchend
    //fun:回调函数
    var def = {x: 10, y: 10, ox: 0, oy: 0, nx: 0, ny: 0, t: 0,speed:400,dbl:!1,T:null}
    //配置：划的范围在5X5像素内当点击处理。speed是双击时间间隔
    function handle(t){
        direction.includes(t) && fun.call(obj,t)
    }
    obj.addEventListener('touchstart', function (e) {
        def.ox = e.targetTouches[0].pageX
        def.oy = e.targetTouches[0].pageY
        def.nx = def.ox
        def.ny = def.oy
        def.t = Date.now()
        handle('touchstart')
    }, false)
    obj.addEventListener('touchmove', function (e) {
        e.preventDefault()
        def.nx = e.targetTouches[0].pageX
        def.ny = e.targetTouches[0].pageY
        handle('touchmove')
    }, false)
    obj.addEventListener('touchend', function () {
        var mX = def.ox - def.nx
        var mY = def.oy - def.ny
        var absX = Math.abs(mX)
        var absY = Math.abs(mY)
        if(absX >= absY && absX > def.x){
            handle(mX > 0?'swipeleft':'swiperight')
        }else if(absX < absY && absY > def.y){
            handle(mY > 0?'swipetop':'swipedown')
        }else{
            if(def.dbl){
                //双击
                clearTimeout(def.T)
                def.dbl = !1
                handle('dblTap')
            }else{
                def.dbl = !0
                def.T = setTimeout(function(){
                    handle(Date.now() - def.t > 500?'longTap':'singleTap')
                    def.dbl = !1
                },def.speed)
            }
        }
        handle('touchend')
    }, false)
}

//使用例子
touchEvent(document.getElementById('view'), ['swipeleft','swiperight','swipetop','swipedown','singleTap','longTap','dblTap'], function (t) {
    console.log(t)
})

*函数修改于：2018-7-13*

完整代码访问这里，请使用支持html5浏览器。如果想要划屏切换图片，请使用智能机或者平板打开：http://down.scscms.com/scs/pic/move.html

==============================================分割线======================================

以上是移动整个div，所以不能循环滚动，下面改写成移动的是对应图片，可以无限的向左或者向右滚动。请使用智能机或者平板打开：http://down.scscms.com/scs/pic/move2.html