javascript - jquery绑定(bind)点击事件到ui slider

Question

我有一些用鼠标滚轮转换幻灯片的 jquery。我添加了 jquery slider 并绑定(bind)了基于 ui.value 与当前幻灯片索引的点击事件以转换幻灯片。问题是，如果您不快速移动 slider ，它会正常工作，但如果移动得太快，则幻灯片转换当前索引会与 ui.value 不对齐。 ui.value 是正确的，所以我认为这里的点击事件被跳过了？网站 mixmastercocktails.com，单击主图像以显示幻灯片。关于如何确保调用点击事件的任何想法？

    $('#slider-vertical').slider({
    orientation: 'vertical',
    range: 'min',
    min: 1,
    max: $('#cards li').length,
    value: 1,
    step: 1,
    slide: function( event, ui ) {
        if(ui.value > current_index)
        {
            next.trigger('click');
        }
        if(ui.value < current_index)
        {
            prev.trigger('click');
        }
    }
}); 

完整的js文件:

(function($) {
var counter = 1;
var newx = 0;
var newy = 0;
var width = 475;
var nwidth = 475;
var current_index = 1;
var previous_index = 1;
var view = $('#rolodex');
var prev = $('#control-prev .prev');
var next = $('#control-next .next');        

$('#cards li').each(function() 
{
    var newz = counter+1000;

    $(this).css('z-index', newz );
    //$(this).html(newz);
    $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');

    $(this).css('width', nwidth +'px');
    newx = newx + 4;
    newy = newy + -2;
    nwidth = nwidth - 8;
    counter--;
});

$(document).bind('mousewheel', function(event, delta, deltaX, deltaY) 
{
    if(deltaY >= 0) {
        next.trigger('click');          
    }
    else {
        prev.trigger('click');          
    }
});     

next.bind('click', function() {
    if($(this).attr('disabled')) return false;
    $('#cards li').filter(':nth-child(' + current_index + ')').css('transform', 'scale(1.2, 1.2)');
    $('#cards li').filter(':nth-child(' + current_index + ')').css('opacity', 0);

    newx = 0;
    newy = 0;
    nwidth = 475;

    $('#cards li').each(function(jindex) {
        if(current_index <= jindex)
        {   
            $(this).css('width', nwidth +'px');
            $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');               

            nwidth = nwidth - 8;
            newx = newx + 4;
            newy = newy + -2;
        }   
    });                     

    current_index ++;
    $('#slider-vertical').slider({value:current_index});        

    check_buttons();
});

prev.bind('click', function() {
    if($(this).attr('disabled')) return false;

    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('transform', 'scale(1, 1)');
    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('opacity', 1);         

    newx = 0;
    newy = 0;
    nwidth = 475;

    $('#cards li').each(function(kindex) {              
        if(current_index <= (kindex + 1))
        {   
            $(this).css('width', nwidth +'px');
            $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');               

            nwidth = nwidth - 8;
            newx = newx + 4;
            newy = newy + -2;               
        }   
    });

    current_index --;
    $('#slider-vertical').slider({value:current_index});

    check_buttons();    
});

function check_buttons() {
    if(current_index==1) {
        prev.attr('disabled', true);
    }
    else {
        prev.attr('disabled', false);
    }

    if(current_index == $('#cards li').length) {
        next.attr('disabled', true);                
    }
    else {
        next.attr('disabled', false);
    }
}

$('#rolodex-image').bind('touchstart',function() {
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1});
    $('#slider-vertical').fadeIn('slow');
    $('#control-prev input').fadeIn('slow');
    $('#control-next input').fadeIn('slow');
});

$('#rolodex-image').bind('click', function() {  
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1}); 
    $('#slider-vertical').fadeIn('slow');
    $('#control-prev input').fadeIn('slow');
    $('#control-next input').fadeIn('slow');        
}); 

$('#slider-vertical').slider({
    orientation: 'vertical',
    range: 'min',
    min: 1,
    max: $('#cards li').length,
    value: 1,
    step: 1,
    slide: function( event, ui ) {
        if(ui.value > current_index)
        {
            next.trigger('click');
        }
        if(ui.value < current_index)
        {
            prev.trigger('click');
        }
    }
}); 

})(jQuery);

Answer 1

slide 不处理您在 slider 上单击和跳转时的事件。您应该改用 change

$('#slider-vertical').slider({
  orientation: 'vertical',
  range: 'min',
  min: 1,
  max: $('#cards li').length,
  value: 1,
  step: 1,
  change: function( event, ui ) {
    if(ui.value > current_index) {
      var index_change = ui.value - current_index;
      for (var i = 0; i < index_change; i++) {
        next.trigger('click');
      }
    }

    if(ui.value < current_index) {
      var index_change = current_index - ui.value;
      for (var j = 0; j < index_change; j++) {
        prev.trigger('click'); 
      }
    }
  }
});

我已经用答案更新了 JSFiddle http://jsfiddle.net/mnQfr/13/ .