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

首先，我认为你需要有一个指示器来识别用户滚动到哪个幻灯片，或者哪个幻灯片当前在视口上以便滚动到左边＆amp;工作正常的权利。

/*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()，一个人会做得很好，也是最好的做法。

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

1 个答案: