Question

我在这个demo中使用Jquery scrollLeft。

如何更改“下一个”点击以向右（左侧）滚动3个图像而不只是一个？

var $boxes = $(".images"),
    $slides = $('#slides'),
    pos = 0;
$("#next").click(function () {
    var $nextBox = $boxes.first();
    $boxes.length > ++pos + 3 ? $nextBox = $($boxes[pos]) : pos = 0;
    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});
$("#prev").click(function () {
    var $nextBox = $boxes.last();
    ($boxes.length > --pos && pos > -3) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 3;
    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

Answer 1

我已经更新了你的Javascript看起来像这样，你可以在JS Fiddle上看到这个。我还建议重构代码，以便将animate功能包装在自己的函数中。

另外，请注意索引0是第一张幻灯片，1是第二张幻灯片，依此类推。

http://jsfiddle.net/r6HwL/86/

var $boxes = $(".images"),
    $slides = $('#slides'),
    pos = 0;
$('button[data-go]').on('click', function() {
    var slide = $('input[data-slide]').val(),
        el = $slides.find('img').eq(slide);

    $slides.animate({
        scrollLeft: el.offset().left + $slides.scrollLeft()
    }, 500);
});


$("#next").click(function () {
    var $nextBox = $boxes.first();

    $boxes.length > ++pos ? $nextBox = $($boxes[pos]) : pos = 0;

    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

$("#prev").click(function () {
    var $nextBox = $boxes.last();

    ($boxes.length > --pos && pos > -1) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 1;

    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

Answer 2

$("#next").click(function () {
    var $nextBox = $boxes.first();

    pos += 3;
    $boxes.length > pos ? $nextBox = $($boxes[pos]) : pos = 0;

    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

$("#prev").click(function () {
    var $nextBox = $boxes.last();

    pos -= 3;
    ($boxes.length > pos && pos > -1) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 3;

    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

http://jsfiddle.net/r6HwL/89/

Answer 3

我的（已）位有可配置的步骤。

var $boxes = $(".images"),
    $slides = $('#slides'),
    pos = 0;
    mx = $boxes.length;
    steps = 3;

$("#next").click(function () {
    pos = pos + steps;
    if (pos >= mx) {
        pos = 0;
    }
    var $nextBox = $boxes.eq(pos);
    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

$("#prev").click(function () {
    pos = pos - steps;
    if (pos < 0) {
        pos = mx - steps;
    }
    var $nextBox = $boxes.eq(pos);
    $slides.animate({
        scrollLeft: $nextBox.offset().left + $slides.scrollLeft()
    }, 500);
});

jQuery scrollLeft多个步骤

3 个答案: