Question

我有一些jquery用鼠标滚轮过渡幻灯片。我添加了jquery滑块，并根据ui.value与当前幻灯片索引绑定了单击事件以转换幻灯片。问题是，如果不将滑块快速移动，它可以正常工作，但如果移动速度太快，则滑动过渡当前索引将与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不处理该事件。您应该使用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'); 
      }
    }
  }
});

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

jquery绑定点击事件到ui滑块

1 个答案: