jquery - 带按钮的 slider 。如何提高？

Question

我需要制作一个 slider 。

我有内容(应该水平移动)和两个按钮 - “右”和“左”。

如果按住按钮，内容开始移动(向适当的方向)。如果不按住按钮，移动就会停止。此行为复制了常用窗口滚动条的行为。

我写了一些代码:

var animateTime = 1,
    offsetStep = 5;

//event handling for buttons "left", "right"
$('.bttR, .bttL')
    .mousedown(function() {
        scrollContent.data('loop', true).loopingAnimation($(this));
    })
    .bind("mouseup mouseout", function(){
        scrollContent.data('loop', false);
    });


$.fn.loopingAnimation = function(el){
    if(this.data('loop') == true){
        var leftOffsetStr;

        leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2));

        if(el.attr('class') == 'bttR')
            leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px';
        else if(el.attr('class') == 'bttL')
            leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px';


        this.animate({marginLeft: leftOffsetStr}, animateTime, function(){
            $(this).loopingAnimation(el);
        })
    }
    return this;
}

但它确实有一些我不喜欢的地方:

1. 它总是调用函数动画 (loopingAnimation) - 我认为这是一个额外的负载(不好)。
2. 移动内容时，他会“抽搐和颤抖”-(这不太漂亮)。

如何更优雅解决这个问题，并且没有代码的缺陷？

Answer 1

如果一次为多个像素设置动画，我认为您无法绕过函数的循环或抽搐和颤抖。

但我确实尝试清理一下您的代码，因为您可以将 +=1px 或 -=1px 与动画函数一起使用: (更新:删除了动画功能，但您可以使用+=1px或-=1px以供将来引用)

$(document).ready(function(){

    var animateTime = 1,
         offsetStep = 5,
         scrollWrapper = $('#wrap');

 //event handling for buttons "left", "right"
 $('.bttR, .bttL')
    .mousedown(function() {
        scrollWrapper.data('loop', true);
        loopingAnimation($(this), $(this).is('.bttR') );
    })
    .bind("mouseup mouseout", function(){
        scrollWrapper.data('loop', false).stop();
        $(this).data('scrollLeft', this.scrollLeft);
    });

    loopingAnimation = function(el, dir){
        if(scrollWrapper.data('loop')){
            var sign = (dir) ? offsetStep : -offsetStep;
            scrollWrapper[0].scrollLeft += sign;
            setTimeout( function(){ loopingAnimation(el,dir) }, animateTime );
        }
        return false;
    };

})

因为我有强制症并且不喜欢慢速滚动，我 made a demo具有鼠标滚轮功能和鼠标拖放功能。这是额外的代码:

更新:实际上，我认为如果你不使用 jQuery 动画功能，你会得到更平滑的滚动。我已经更新了上面的代码，并且 the demo .

$('#wrap')  // wrap around content
    .mousedown(function(event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    })
    .mouseup(function (event) {
        $(this).data('down', false);
    })
    .mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    })
    .mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    })
    .css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });