兼容PC端、移动端的焦点图轮播

焦点轮播图很是常见,稍微有点JS基础的都能信手拈来,网上也能找到很多类似的插件…

但是PC端和移动端都兼容的焦点图轮播插件却很少,之前找了一下,没有找到合适的,鉴于这样的插件使用场景很普遍,故决定自己写一个…

效果预览:点我

难点在于对移动端触摸事件的把控:

function bindTouchEvent(){
    for(var i=0;i<runLi.length;i++){
        runLi.get(i).addEventListener('touchstart',touchStart,false);
        runLi.get(i).addEventListener('touchmove',touchMove,false);
        runLi.get(i).addEventListener('touchend',touchEnd,false);
    }
}

function touchPosition(e){
    var touches = e.changedTouches,
            l = touches.length,
            tagX,
            tagY;
    for (var i = 0; i < l; i++){
        tagX = touches[i].clientX;
        tagY = touches[i].clientY;
    }
    oPosition.x = tagX;
    oPosition.y = tagY;
    return oPosition;
}

function touchStart(e){
    clearInterval(timer);
    touchPosition(e);
    startX = oPosition.x;
    startY = oPosition.y;
}

function touchMove(e){
    touchPosition(e);
    var moveX = oPosition.x - startX,
            moveY = oPosition.y - startY;
    if (Math.abs(moveY) < Math.abs(moveX)) {
        e.preventDefault();
    }
}

function touchEnd(e){
    touchPosition(e);
    var moveX = oPosition.x - startX,
            moveY = oPosition.y - startY;
    if(Math.abs(moveY) < Math.abs(moveX)){
        if(moveX > 0){
            index--;
            if(index<0){index=runLi.length-1;}
            changeImg(index);
        }else{
            index++;
            if(index>runLi.length-1){index=0;}
            changeImg(index);
        }
    }
    timer=setInterval(autoRun,speed);
}

完整JS代码请见:点我

发表评论

电子邮件地址不会被公开。 必填项已用*标注