Javascript 用按扣和奇数项目触摸幻灯片

所以我必须实现这个相当简单的触摸滑块，它的主要功能必须是它从一个幻灯片捕捉到另一个幻灯片，我不知道如何做的一件事是它捕捉到情侣，但是当我有奇数个项目时会发生什么？这种情况发生了：我留下了一个空的空间

我想要实现的是：在最后一个项目上，滑动应该理解前面只有一个项目，并在距离的一半处滑动/捕捉，这样web视图上就不会留下空白

我使用了flipsnap.js，但我在这一点上陷入了困境，因为我不是真正的javascript专家，插件也不是真的要以这种方式工作

这是一把小提琴：

我试图想出一种css方法来解决这个问题，但我什么也没想到，所以它主要是一种javascript。下面是一些代码：

    /**
 * flipsnap.js
 *
 * @version  0.6.1
 * @url http://pxgrid.github.com/js-flipsnap/
 *
 * Copyright 2011 PixelGrid, Inc.
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

(function (window, document, undefined) {

    var div = document.createElement('div');
    var prefix = ['webkit', 'moz', 'o', 'ms'];
    var saveProp = {};
    var support = Flipsnap.support = {};
    var gestureStart = false;

    support.transform3d = hasProp([
        'perspectiveProperty',
        'WebkitPerspective',
        'MozPerspective',
        'OPerspective',
        'msPerspective']);

    support.transform = hasProp([
        'transformProperty',
        'WebkitTransform',
        'MozTransform',
        'OTransform',
        'msTransform']);

    support.transition = hasProp([
        'transitionProperty',
        'WebkitTransitionProperty',
        'MozTransitionProperty',
        'OTransitionProperty',
        'msTransitionProperty']);

    support.addEventListener = 'addEventListener' in window;
    support.mspointer = window.navigator.msPointerEnabled;

    support.cssAnimation = (support.transform3d || support.transform) && support.transition;

    var eventTypes = ['touch', 'mouse'];
    var events = {
        start: {
            touch: 'touchstart',
            mouse: 'mousedown'
        },
        move: {
            touch: 'touchmove',
            mouse: 'mousemove'
        },
        end: {
            touch: 'touchend',
            mouse: 'mouseup'
        }
    };

    if (support.addEventListener) {
        document.addEventListener('gesturestart', function () {
            gestureStart = true;
        });

        document.addEventListener('gestureend', function () {
            gestureStart = false;
        });
    }

    function Flipsnap(element, opts) {
        return (this instanceof Flipsnap) ? this.init(element, opts) : new Flipsnap(element, opts);
    }

    Flipsnap.prototype.init = function (element, opts) {
        var self = this;

        // set element
        self.element = element;
        if (typeof element === 'string') {
            self.element = document.querySelector(element);
        }

        if (!self.element) {
            throw new Error('element not found');
        }

        if (support.mspointer) {
            self.element.style.msTouchAction = 'pan-y';
        }

        // set opts
        opts = opts || {};
        self.distance = opts.distance;
        self.maxPoint = opts.maxPoint;
        self.disableTouch = (opts.disableTouch === undefined) ? false : opts.disableTouch;
        self.disable3d = (opts.disable3d === undefined) ? false : opts.disable3d;
        self.transitionDuration = (opts.transitionDuration === undefined) ? '350ms' : opts.transitionDuration + 'ms';

        // set property
        self.currentPoint = 0;
        self.currentX = 0;
        self.animation = false;
        self.use3d = support.transform3d;
        if (self.disable3d === true) {
            self.use3d = false;
        }

        // set default style
        if (support.cssAnimation) {
            self._setStyle({
                transitionProperty: getCSSVal('transform'),
                transitionTimingFunction: 'cubic-bezier(0,0,0.25,1)',
                transitionDuration: '0ms',
                transform: self._getTranslate(0)
            });
        } else {
            self._setStyle({
                position: 'relative',
                left: '0px'
            });
        }

        // initilize
        self.refresh();

        eventTypes.forEach(function (type) {
            self.element.addEventListener(events.start[type], self, false);
        });

        return self;
    };

    Flipsnap.prototype.handleEvent = function (event) {
        var self = this;

        switch (event.type) {
            case events.start.touch:
            case events.start.mouse:
                self._touchStart(event);
                break;
            case events.move.touch:
            case events.move.mouse:
                self._touchMove(event);
                break;
            case events.end.touch:
            case events.end.mouse:
                self._touchEnd(event);
                break;
            case 'click':
                self._click(event);
                break;
        }
    };

    Flipsnap.prototype.refresh = function () {
        var self = this;

        // setting max point
        self._maxPoint = (self.maxPoint === undefined) ? (function () {
            var childNodes = self.element.childNodes,
                itemLength = -1,
                i = 0,
                len = childNodes.length,
                node;
            for (; i < len; i++) {
                node = childNodes[i];
                if (node.nodeType === 1) {
                    itemLength++;
                }
            }

            return itemLength;
        })() : self.maxPoint;

        // setting distance
        if (self.distance === undefined) {
            if (self._maxPoint < 0) {
                self._distance = 0;
            } else {
                self._distance = self.element.scrollWidth / (self._maxPoint + 1);
            }
        } else {
            self._distance = self.distance;
        }

        // setting maxX
        self._maxX = -self._distance * self._maxPoint;

        self.moveToPoint();
    };

    Flipsnap.prototype.hasNext = function () {
        var self = this;

        return self.currentPoint < self._maxPoint;
    };

    Flipsnap.prototype.hasPrev = function () {
        var self = this;

        return self.currentPoint > 0;
    };

    Flipsnap.prototype.toNext = function (transitionDuration) {
        var self = this;

        if (!self.hasNext()) {
            return;
        }

        self.moveToPoint(self.currentPoint + 1, transitionDuration);
    };

    Flipsnap.prototype.toPrev = function (transitionDuration) {
        var self = this;

        if (!self.hasPrev()) {
            return;
        }

        self.moveToPoint(self.currentPoint - 1, transitionDuration);
    };

    Flipsnap.prototype.moveToPoint = function (point, transitionDuration) {
        var self = this;

        transitionDuration = transitionDuration === undefined ? self.transitionDuration : transitionDuration + 'ms';

        var beforePoint = self.currentPoint;

        // not called from `refresh()`
        if (point === undefined) {
            point = self.currentPoint;
        }

        if (point < 0) {
            self.currentPoint = 0;
        } else if (point > self._maxPoint) {
            self.currentPoint = self._maxPoint;
        } else {
            self.currentPoint = parseInt(point, 10);
        }

        if (support.cssAnimation) {
            self._setStyle({
                transitionDuration: transitionDuration
            });
        } else {
            self.animation = true;
        }
        self._setX(-self.currentPoint * self._distance, transitionDuration);

        if (beforePoint !== self.currentPoint) { // is move?
            // `fsmoveend` is deprecated
            // `fspointmove` is recommend.
            self._triggerEvent('fsmoveend', true, false);
            self._triggerEvent('fspointmove', true, false);
        }
    };

    Flipsnap.prototype._setX = function (x, transitionDuration) {
        var self = this;

        self.currentX = x;
        if (support.cssAnimation) {
            self.element.style[saveProp.transform] = self._getTranslate(x);
        } else {
            if (self.animation) {
                self._animate(x, transitionDuration || self.transitionDuration);
            } else {
                self.element.style.left = x + 'px';
            }
        }
    };

    Flipsnap.prototype._touchStart = function (event) {
        var self = this;

        if (self.disableTouch || self._eventType || gestureStart) {
            return;
        }

        some(eventTypes, function (type) {
            if (event.type === events.start[type]) {
                self._eventType = type;
                return true;
            }
        });

        self.element.addEventListener(events.move[self._eventType], self, false);
        document.addEventListener(events.end[self._eventType], self, false);

        var tagName = event.target.tagName;
        if (self._eventType === 'mouse' && tagName !== 'SELECT' && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON') {
            event.preventDefault();
        }

        if (support.cssAnimation) {
            self._setStyle({
                transitionDuration: '0ms'
            });
        } else {
            self.animation = false;
        }
        self.scrolling = true;
        self.moveReady = false;
        self.startPageX = getPage(event, 'pageX');
        self.startPageY = getPage(event, 'pageY');
        self.basePageX = self.startPageX;
        self.directionX = 0;
        self.startTime = event.timeStamp;
        self._triggerEvent('fstouchstart', true, false);
    };

    Flipsnap.prototype._touchMove = function (event) {
        var self = this;

        if (!self.scrolling || gestureStart) {
            return;
        }

        var pageX = getPage(event, 'pageX'),
            pageY = getPage(event, 'pageY'),
            distX,
            newX,
            deltaX,
            deltaY;

        if (self.moveReady) {
            event.preventDefault();

            distX = pageX - self.basePageX;
            newX = self.currentX + distX;
            if (newX >= 0 || newX < self._maxX) {
                newX = Math.round(self.currentX + distX / 3);

            }

            // When distX is 0, use one previous value.
            // For android firefox. When touchend fired, touchmove also
            // fired and distX is certainly set to 0. 
            self.directionX = distX === 0 ? self.directionX : distX > 0 ? -1 : 1;

            // if they prevent us then stop it
            var isPrevent = !self._triggerEvent('fstouchmove', true, true, {
                delta: distX,
                direction: self.directionX
            });

            if (isPrevent) {
                self._touchAfter({
                    moved: false,
                    originalPoint: self.currentPoint,
                    newPoint: self.currentPoint,
                    cancelled: true
                });
            } else {
                self._setX(newX);
            }
        } else {
            deltaX = Math.abs(pageX - self.startPageX);
            deltaY = Math.abs(pageY - self.startPageY);
            if (deltaX > 5) {
                event.preventDefault();
                self.moveReady = true;
                self.element.addEventListener('click', self, true);
            } else if (deltaY > 5) {
                self.scrolling = false;
                self._touchEnd();
            }
        }

        self.basePageX = pageX;
    };

    Flipsnap.prototype._touchEnd = function (event) {
        var self = this;

        self.element.removeEventListener(events.move[self._eventType], self, false);
        document.removeEventListener(events.end[self._eventType], self, false);
        self._eventType = null;

        if (!self.scrolling) {
            return;
        }

        var newPoint = -self.currentX / self._distance;
        newPoint = (self.directionX > 0) ? Math.ceil(newPoint) : (self.directionX < 0) ? Math.floor(newPoint) : Math.round(newPoint);

        if (newPoint < 0) {
            newPoint = 0;
        } else if (newPoint > self._maxPoint) {
            newPoint = self._maxPoint;
        }

        self._touchAfter({
            moved: newPoint !== self.currentPoint,
            originalPoint: self.currentPoint,
            newPoint: newPoint,
            cancelled: false
        });

        self.moveToPoint(newPoint);
    };

    Flipsnap.prototype._click = function (event) {
        var self = this;

        event.stopPropagation();
        event.preventDefault();
    };

    Flipsnap.prototype._touchAfter = function (params) {
        var self = this;

        self.scrolling = false;
        self.moveReady = false;

        setTimeout(function () {
            self.element.removeEventListener('click', self, true);
        }, 200);

        self._triggerEvent('fstouchend', true, false, params);
    };

    Flipsnap.prototype._setStyle = function (styles) {
        var self = this;
        var style = self.element.style;

        for (var prop in styles) {
            setStyle(style, prop, styles[prop]);
        }
    };

    Flipsnap.prototype._animate = function (x, transitionDuration) {
        var self = this;

        var elem = self.element;
        var begin = +new Date();
        var from = parseInt(elem.style.left, 10);
        var to = x;
        var duration = parseInt(transitionDuration, 10);
        var easing = function (time, duration) {
            return -(time /= duration) * (time - 2);
        };
        var timer = setInterval(function () {
            var time = new Date() - begin;
            var pos, now;
            if (time > duration) {
                clearInterval(timer);
                now = to;
            } else {
                pos = easing(time, duration);
                now = pos * (to - from) + from;
            }
            elem.style.left = now + "px";
        }, 10);
    };

    Flipsnap.prototype.destroy = function () {
        var self = this;

        eventTypes.forEach(function (type) {
            self.element.removeEventListener(events.start[type], self, false);
        });
    };

    Flipsnap.prototype._getTranslate = function (x) {
        var self = this;

        return self.use3d ? 'translate3d(' + x + 'px, 0, 0)' : 'translate(' + x + 'px, 0)';
    };

    Flipsnap.prototype._triggerEvent = function (type, bubbles, cancelable, data) {
        var self = this;

        var ev = document.createEvent('Event');
        ev.initEvent(type, bubbles, cancelable);

        if (data) {
            for (var d in data) {
                if (data.hasOwnProperty(d)) {
                    ev[d] = data[d];
                }
            }
        }

        return self.element.dispatchEvent(ev);
    };

    function getPage(event, page) {
        return event.changedTouches ? event.changedTouches[0][page] : event[page];
    }

    function hasProp(props) {
        return some(props, function (prop) {
            return div.style[prop] !== undefined;
        });
    }

    function setStyle(style, prop, val) {
        var _saveProp = saveProp[prop];
        if (_saveProp) {
            style[_saveProp] = val;
        } else if (style[prop] !== undefined) {
            saveProp[prop] = prop;
            style[prop] = val;
        } else {
            some(prefix, function (_prefix) {
                var _prop = ucFirst(_prefix) + ucFirst(prop);
                if (style[_prop] !== undefined) {
                    saveProp[prop] = _prop;
                    style[_prop] = val;
                    return true;
                }
            });
        }
    }

    function getCSSVal(prop) {
        if (div.style[prop] !== undefined) {
            return prop;
        } else {
            var ret;
            some(prefix, function (_prefix) {
                var _prop = ucFirst(_prefix) + ucFirst(prop);
                if (div.style[_prop] !== undefined) {
                    ret = '-' + _prefix + '-' + prop;
                    return true;
                }
            });
            return ret;
        }
    }

    function ucFirst(str) {
        return str.charAt(0).toUpperCase() + str.substr(1);
    }

    function some(ary, callback) {
        for (var i = 0, len = ary.length; i < len; i++) {
            if (callback(ary[i], i)) {
                return true;
            }
        }
        return false;
    }

    if (typeof exports == 'object') {
        module.exports = Flipsnap;
    } else if (typeof define == 'function' && define.amd) {
        define(function () {
            return Flipsnap;
        });
    } else {
        window.Flipsnap = Flipsnap;
    }

})(window, window.document);

var $pointer = $('.pointer span');
var flipsnap = Flipsnap('.flipsnap', {
    //distance: 230
});
flipsnap.element.addEventListener('fspointmove', function () {
    $pointer.filter('.current').removeClass('current');
    $pointer.eq(flipsnap.currentPoint).addClass('current');
}, false);

function resize() {

    var heights = window.innerHeight;
    jQuery('.item').css('height', (heights) + "px");
}

resize();

/**
*flipsnap.js
*
*@version 0.6.1
*@urlhttp://pxgrid.github.com/js-flipsnap/
*
*版权所有2011 PixelGrid，Inc。
*根据麻省理工学院许可证获得许可：
* http://www.opensource.org/licenses/mit-license.php
*/
（功能（窗口、文档、未定义）{
var div=document.createElement（'div'）；
var前缀=['webkit'、'moz'、'o'、'ms']；
var saveProp={}；
var support=Flipsnap.support={}；
var gestureStart=false；
support.transform3d=hasProp([
“透视属性”，
“WebkitPerspective”，
"莫兹透视",，
“操作性”，
“msPerspective”]）；
support.transform=hasProp([
“转换属性”，
“WebKittTransform”，
“MozTransform”，
“OTransform”，
“msTransform”]）；
support.transition=hasProp([
“transitionProperty”，
“WebKittTransitionProperty”，
“MozTransitionProperty”，
“OTransitionProperty”，
'msTransitionProperty']）；
support.addEventListener='addEventListener'在窗口中；
support.mspointer=window.navigator.msPointerEnabled；
support.cssAnimation=（support.transform3d | | support.transform）和&support.transition；
var eventTypes=['touch'，'mouse']；
var事件={
开始：{
touch:“touchstart”，
老鼠：“老鼠镇”
},
移动：{
触摸：“触摸移动”，
鼠标：“mousemove”
},
完:{
触摸：“触摸端”，
老鼠：“mouseup”
}
};
if（support.addEventListener）{
document.addEventListener（'gesturestart'，函数（）{
gestureStart=true；
});
document.addEventListener（'gestureend'，函数（）{
手势开始=假；
});
}
功能Flipsnap（元素，选项）{
return（this instanceof Flipsnap）？this.init（元素，选项）：新建Flipsnap（元素，选项）；
}
Flipsnap.prototype.init=函数（元素，选项）{
var self=这个；
//集合元素
self.element=元素；
if（元素的类型=='string'）{
self.element=document.querySelector（元素）；
}
if（！self.element）{
抛出新错误（“未找到元素”）；
}
if（support.mspointer）{
self.element.style.msTouchAction='pan-y'；
}
//设置选项
opts=opts |{}；
self.distance=选择距离；
self.maxPoint=opts.maxPoint；
self.disableTouch=（opts.disableTouch==未定义）？false：opts.disableTouch；
self.disable3d=（opts.disable3d==未定义）？false：opts.disable3d；
self.transitionDuration=（opts.transitionDuration==未定义）？'350ms'：opts.transitionDuration+'ms'；
//集合属性
self.currentPoint=0；
self.currentX=0；
self.animation=false；
self.use3d=support.transform3d；
if（self.disable3d==true）{
self.use3d=false；
}
//设置默认样式
if（support.cssAnimation）{
自我风格({
transitionProperty:getCSSVal（'transform'），
TransitionTimeingFunction:“立方贝塞尔（0,0,0.25,1）”，
转换持续时间：“0ms”，
转换：self.\u getTranslate（0）
});
}否则{
自我风格({
位置：'相对'，
左：“0px”
});
}
//初始化
self.refresh（）；
eventTypes.forEach（函数（类型）{
self.element.addEventListener（events.start[type]，self，false）；
});
回归自我；
};
Flipsnap.prototype.handleEvent=函数（事件）{
var self=这个；
开关（事件类型）{
case events.start.touch：
case events.start.mouse：
self.\u touchStart（事件）；
打破
case events.move.touch：
case events.move.mouse：
自动（事件）；
打破
case events.end.touch：
case events.end.mouse：
自接触端（事件）；
打破
案例“点击”：
点击（事件）；
打破
}
};
Flipsnap.prototype.refresh=函数（）{
var self=这个；
//设置最大点
self.\u maxPoint=（self.maxPoint==未定义）？（函数（）{
var childNodes=self.element.childNodes，
itemLength=-1，
i=0，
len=childNodes.length，
节点；
对于（；ivar vpwidth = $(".viewport").width();
var itemwidth = $(".item").width();     
var flipsnapwidth = itemwidth * 4; //4 is the number of elements        
$(".viewport").css("width",vpwidth);
$(".item").css("width",itemwidth);
$(".flipsnap").css("width",flipsnapwidth);