jQuery：向左/向右滾動到下一個div

Question

我有一個父.slider-wrap div，寬度為100% ，里面有3個.slider-slide-wrap子div，每個div的寬度為680px 。 您可以在.slider-wrap div中水平滾動。

我還創建了2個.slider-nav div， #slider-left ， #slider-right ，您可以使用滾動條隨意滾動，但是如果單擊隨時#slider-right div，它將使您滑到下一個.slider-slide-wrap div實例。 因此，這2個.slider-nav div將帶您​​左右移動.slider-slide-wrap div的下一個/上一個實例。

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的工作原理 。

PS。 您也不需要很多$(document).ready() ，一個就可以了，這是一種最佳實踐。