jQuery：向左/向右滚动到下一个 div

Question

我.slider-wrap在100%宽度上有一个父div，.slider-slide-wrap里面有 3个子 div，每个在680px宽度上。您可以在.slider-wrapdiv内水平滚动。

我还创建了 2 个.slider-navdiv，#slider-left坐在左边，#slider-right坐在右边，这个想法是，您可以使用滚动条随意滚动，但是如果您#slider-right随时单击该div，它就会将您滑到下一个.slider-slide-wrapdiv实例。因此，2 个.slider-navdiv 将带您左右移动到.slider-slide-wrapdiv的下一个/上一个实例。

jsFiddle 演示：http : //jsfiddle.net/neal_fletcher/rAb3V/

HTML：

<div class="slider-wrap">
    <div class="slide-wrap">
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
        <div class="slider-slide-wrap"></div>
    </div>
</div>

<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>

jQuery：

$(document).ready(function () {

    var n = $(".slider-slide-wrap").length,
        width = 680,
        newwidth = width * n;

    $('.slide-wrap').css({
        'width': newwidth
    });

});


$(document).ready(function () {
    $(".slider-slide-wrap").each(function (i) {
        var thiswid = 680;
        $(this).css({
            'left': thiswid * i
        });
    });
});

如果这可能吗？任何建议将不胜感激！

Answer 1

首先，我认为您需要有一个指示器来识别用户滚动到哪张幻灯片，或者哪张幻灯片当前在视口上，以便左右滚动正常工作。

/*on scroll move the indicator 'shown' class to the
most visible slide on viewport
*/
$('.slider-wrap').scroll(function () {
    var scrollLeft = $(this).scrollLeft();
    $(".slider-slide-wrap").each(function (i) {
        var posLeft = $(this).position().left
        var w = $(this).width();

        if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
          $(this).addClass('shown').siblings().removeClass('shown');
        }
    });
});
/* on left button click scroll to 
   the previous sibling of the current visible slide */
$('#slider-left').click(function () {
    var $prev = $('.slide-wrap .shown').prev();
    if ($prev.length) {
        $('.slider-wrap').animate({
            scrollLeft: $prev.position().left
        }, 'slow');
    }
});
/* on right button click scroll to 
   the next sibling of the current visible slide */
$('#slider-right').click(function () {
    var $next = $('.slide-wrap .shown').next();
    if ($next.length) {
        $('.slider-wrap').animate({
            scrollLeft: $next.position().left
        }, 'slow');
    }
});

看看这个jsfiddle 的工作。

附注。你也不需要很多$(document).ready()，一个就可以了，而且是一个最佳实践。