Слайдер с кнопками. Как улучшить? - PullRequest
Новая
       34

Слайдер с кнопками. Как улучшить?

3 голосов
/ 14 мая 2010

Мне нужно сделать слайдер.

У меня есть контент (который должен смещаться по горизонтали) и две кнопки - «вправо» и «влево».

Если нажать и удерживать кнопку, содержимое начинает двигаться (в соответствующем направлении). Если вы не удерживаете кнопку, движение прекращается. Это поведение копирует поведение обычной полосы прокрутки окна.

Я написал код: 

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. При перемещении контента он «дергается и дрожит» - (это не красиво).

Как я могу решить эту проблему более элегантно и без недостатков моего кода?

1 Ответ

8 голосов
/ 14 мая 2010

Я не думаю, что вы можете обойти циклическую функцию или дергаться и дрожать, если вы анимируете более одного пикселя за раз.

Но я попытался немного очистить ваш код, , потому что вы можете использовать +=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;
    };

})

Поскольку у меня OCD и я не люблю медленные скроллеры, я сделал демо с функциональностью колесика мыши и функцией перетаскивания мышью. Вот дополнительный код:

Обновление : На самом деле, я думаю, что если вы не используете функцию анимации jQuery, вы получите более плавную прокрутку. Я обновил код выше и демо . 

$('#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'
    });
...