jQuery使用监听器在mousedown上滚动(对于jCarousel)

时间:2013-05-26 22:15:07

标签: javascript jquery jcarousel

我试图将jQuery jCarousel用作图像浏览器。它工作正常,但我想改变交互,以便它在mousedown上连续滚动,而不是在点击时滚动设定的数量。

显然,我是一个使用jQuery的新手,但我最初认为我可以使用jCarousel配置事件选项来触发mousedown的控件。这有效,但不会继续滚动。

我想我需要一个听众才能看看鼠标是否仍在关闭,对吧?我在StackOverflow上找到了this解决方案,并尝试应用:jsfiddle.net/amenity/BSq85/19

jQuery(document).ready(function () {
    $('.jcarousel').jcarousel({
        wrap: 'circular',
        animation: 1500,
        easing: 'linear'
    });

    var timeout, clicker = $('.jcarousel-prev');
    var count = 0;

    clicker.mousedown(function () {
        timeout = setInterval(function () {
            $('.jcarousel-prev').jcarouselControl({
                target: '-=2'
            });
        }, 500);

        return false;
    });

    $(document).mouseup(function () {
        clearInterval(timeout);
        return false;
    });

    $('.jcarousel-next').jcarouselControl({
        target: '+=2',
            'event': 'mousedown'
    });


});

我离开(右)下一个按钮继续点击以与功能正常的外部控件进行比较。

1 个答案:

答案 0 :(得分:0)

没有人把我从新手的深渊拉出来,我挣扎着直到我去了。 This answer看起来非常接近我所需要的,我把它作为起点。现在我至少得到了here

正如我所怀疑的那样,关键是创建一个计时器,如果鼠标仍然按下并在鼠标上清除它,则再次调用该函数:

 var _this = null;
    $('.jcarousel-next').mousedown(function () {
        $('.jcarousel-next').jcarouselControl({
              target: '+=2'
        });
        _this = $(this);
        _this.click();
        window.setTimeout(CallAgain, 100);
    });

    $('.jcarousel-next').mouseup(function () {
            _this = null;
        });

    function CallAgain() {
        if (_this != null) {
            //alert("Inside Call again");
            _this.click();
            window.setTimeout(CallAgain, 100);
        }
    };

在小提琴上,右箭头在mousedown上有滚动,而left / prev在默认情况下保留。现在我只需要解决它。