0

我尝试了不同的方法来设置图像轮播的水平滚动并最终解决了这个问题,但不幸的是我无法弄清楚如何使用Flickity图像滑块解决以下问题。浏览器控制台显示以下错误:

无法设置未定义的属性“x”
无法读取未定义的属性“x”

正如您在codepen.io的这个示例中看到的那样,这些行为非常糟糕

$('.gallery').mousewheel(function(e) {
    e.preventDefault();
    var flkty = Flickity.data(this);

    if (!window.wheeling) {
        // console.log('start wheeling!');

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    clearTimeout(window.wheeling);
    window.wheeling = setTimeout(function() {
        // console.log('stop wheeling!');

        delete window.wheeling;

        // reset wheeldelta
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;
    }, 50);

    window.wheeldelta.x += e.deltaFactor * e.deltaX;
    window.wheeldelta.y += e.deltaFactor * e.deltaY;
    if(window.wheeldelta.x > 500 || window.wheeldelta.y > 500 || window.wheeldelta.x < -500 || window.wheeldelta.y < -500){
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    // console.log(window.wheeldelta);

});

PS:代码在这个 JQuery 插件之上工作。

4

1 回答 1

0

我不记得在浏览器的全局范围内会有一个像 wheeldelta 这样的现有属性,从您的示例来看,wheeldelta 似乎是通过您的代码直接计算和使用的东西。

在这种情况下,只需在开始时启动 wheeldelta 即可解决您的直接问题:

window.wheeldelta = {}
于 2015-12-30T17:14:06.873 回答