jQuery使用侦听器在mousedown上滚动（适用于jCarousel）

Question

I'm trying to use jQuery jCarousel as an image browser. It's working fine, but I'd like to change the interaction so that it scrolls continuously on mousedown, rather than scrolling the set amount on click.

Obviously, I'm a complete novice using jQuery, but I initially thought I could use the jCarousel configuration event option to trigger the control at mousedown. This works, but doesn't continue the scrolling.

I think I need a listener to see if the mouse is still down, right? I found this solution on StackOverflow and am trying to apply: 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'
    });


});

I left the (right) next button moving on click for comparison to the functioning external control.

Answer 1

Without anyone to pull me out of the newbie abyss, I floundered until I go something. This answer looked so close to what I needed that I used it as a starting point. Now I've at least gotten here .

The key is, as I suspected, creating a timer to call the function again if the mouse is still down and clearing it on mouseup:

 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);
        }
    };

On the fiddle, the right arrow has the scroll on mousedown, while left/prev is left at the default. Now I just have to smooth it out.