Question

除了左边，我还试图让滑块向右滑动。名为“Next”和“Previous”的两个按钮控制滑动。

目前滑块滑动没问题。变量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;
    });
});

Answer 1

我不确定我是否理解这个问题。我用一个简单的if else声明来修饰你的小提琴。这是你在寻找什么？ http://jsfiddle.net/flyingsausage/NvxKj/

如何让这个小jQuery滑块向右滑动？

1 个答案: