0

我试图让一个滑块向右滑动，除了向左滑动。名为“下一个”和“上一个”的两个按钮控制滑动。

目前滑块滑动没有问题。该变量direction保存单击的按钮是“上一个”（向右滑动）还是“下一个”（向左滑动）。direction == 'previous'当滑块向右滑动时，我在实现逻辑时遇到了麻烦。我认为这只是否定一些数字，但不是这样！

这是在 jsFiddle 中准备的代码：http: //jsfiddle.net/LWJQm/

出于演示目的，此代码是愚蠢的，只能一遍又一遍地滑动相同的 DIV。

这里的 JavaScript：

var $slider= $('#slider'),
    sliderHtml = $slider.html(),
    $next = $('#next'),
    $previous = $('#previous'),
    sliderWidth= parseInt($slider.css('width')),
    locked = false;

$('.button').on('click', function() {
    if (locked) {
        return false;   
    }

    locked = true;

    var direction = $(this).attr('id');
    console.log(direction);

    var $transfer = $('<div></div>').css({'width': (2 * sliderWidth) + 'px'});
    var $current = $('<div></div>').css({'width': sliderWidth+ 'px', 'left': '0', 'float': 'left'}).html($slider.html());
    var $next = $('<div></div>').css({'width': sliderWidth+ 'px', 'left': sliderWidth + 'px', 'float': 'left'}).html(sliderHtml);

    $transfer.append($current).append($next);
    $slider.html('').append($transfer);

    $transfer.animate({'margin-left': '-' + sliderWidth+ 'px'}, 300, function() {
        locked = false;
    });
});
4

1 回答 1

1

我不确定我是否理解这个问题。我用一个简单的 if else 语句修改了你的小提琴。这是你要找的吗？ http://jsfiddle.net/flyingsausage/NvxKj/

于 2012-08-19T19:01:20.377 回答